html - 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>

Answer 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).

Obviously 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>