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