Flex element with 0% overflow on IE11

Question

As you can see from this simple code: http://codepen.io/anon/pen/Mazjyv , there is a button that is a flexible element with flex-basis of 0% .

In other browsers, the content does not overflow the button container, however on IE11 it does.

Any clue why this is?

Answer 1

The problem is this rule:

 button { flex: 0 0 0%; } 

You tell button : don't grow, don't shrink, your initial base size is 0.

Use instead:

 button { flex: 1 0 0%; } 

In addition, btw, text overflow also occurred in Chrome 46.