How To Make Flex-end Work In Ie11

I tried to make justify-content: flex-end; work, for overflowing-hidden DIV content, in IE11, without success. After trying several combinations I created a minimal snippet which w

Solution 1:

This can be accomplished with flexbox - if you're willing to mess with your markup a bit. While IE11 does not respect flex-end in a flex parent with overflow: hidden, it does respect flex-start (the default justification). This means that if you set the flex direction of the parent to row-reverse you can obtain the desired behavior (aligning the children to the right edge of the parent and having them overflow towards the left).

The caveat is that this will only work if a) you have a single flex child or b) you're willing to reverse the order of your flex children in your markup.

Applying this to your original code we get:

.token-container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  box-shadow: 1px1px2px1px silver inset;

  display: flex;
  flex-direction: row-reverse;
}
.token {
  display: inline-block;
  border: 1px solid silver;
  margin: 1px3px00;
  border-radius: 4px;
  height: 19px;
  padding: 03px;
}

<divclass="token-container"><divclass="token"><spanclass="token-text">bacon</span></div><divclass="token"><spanclass="token-text">leberkäs</span></div><divclass="token"><spanclass="token-text">pancetta</span></div><divclass="token"><spanclass="token-text">hamburger</span></div><divclass="token"><spanclass="token-text">t-bone</span></div></div>

Solution 2:

This doesn't appear to be a flexbox issue. It appears to be more an issue of how Internet Explorer handles overflow: hidden.

In your code you have the width of the flex container set to 200px. If you change this to, let's say, 500px, you'll see that justify-content: flex-end is working perfectly well in IE11 (and all other major browsers).

.token-container {  width: 500px; } /* make this adjustment from 200px */

It appears that when overflow: hidden clips content in IE11, there isn't much respect for flex alignment. Here's another test:

Restore the width to 200px. Then change the alignment to justify-content: flex-start.

Nothing changes in IE11 (flex-start and flex-end look the same). But if you expand the width to 500px you'll see that flex-start is actually applied. (Same deal with center value.)

Based on these tests I would say this is not a flexbox issue. In a quick search I couldn't find anything about problems with overflow: hidden and IE11, but that may be where the problem lies.

Solution 3:

As others said, forget flex CSS for IE up to version 11.0. I slighly changed your first suggested code, both CSS and HTML, highlightning the changed/added rows:

.token-container {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    padding: 5px;
    box-shadow: 1px1px2px1px silver inset;

    display: flex;
    flex-direction: row;
}
/* you have to nest your tokens inside another div with large fixed margin-left, flex-shrink: 0 (important), and no border nor padding */.intermediate {
    flex: 10 auto;
    padding: 0;
    border: 0;
    margin: 000 -1000px;
    /* added: constant amount - the more, the better
       the perfect value is the workarea width, but, if available,
       you can use the maximum-width of a token element */
}
.token {
    display: inline-block;
    border: 1px solid silver;
    margin: 1px3px00;
    border-radius: 4px;
    height: 19px;
    padding: 03px;

    float: right; /* added: you need to reverse your tokens! (litte effort) */
}

<divclass="token-container"><divclass="intermediate"><!-- reversed children nodes --><divclass="token"><spanclass="token-text">bacon</span></div><divclass="token"><spanclass="token-text">leberkäs</span></div><divclass="token"><spanclass="token-text">pancetta</span></div><divclass="token"><spanclass="token-text">hamburger</span></div><divclass="token"><spanclass="token-text">t-bone</span></div></div></div>