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 creat

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;
}

  
bacon
  
leberkäs
  
pancetta
  
hamburger
  

    t-bone