How to make flex-end work in IE11

Question

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 works in Chrome but not in IE11:

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

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  //align-content: flex-end;
}
.token {
  display: inline-block;
  border: 1px solid silver;
  margin: 1px 3px 0 0;
  border-radius: 4px;
  height: 19px;
  padding: 0 3px;
}

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

Here's the same snippet in CodePen: http://codepen.io/anon/pen/bVgOYJ

I would expect the 'bacon' item to be aligned with the right end of the box; instead the 't-bone' is aligned left.

Please point out any errors, perhaps in my expectations for Internet Explorer.

---

UPDATE: Added my own alternative solution

Leveraging a response to another SO question, I was able to do it--without using flexbox.

http://codepen.io/anon/pen/ZbeQmW

So, thanks @AaronSieb, I guess.

Solution 1

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 2

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: 1px 1px 2px 1px silver inset;

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

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