Flex item with 0

Question

As can be seen in this simple codepen: http://codepen.io/anon/pen/Mazjyv, there's a button which is a flex item with a flex-basis of 0%.

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

Any clue why that is?

Answer 1

The problem is this rule:

button
{
    flex: 0 0 0%;
}

You're telling the button: don't grow, don't shrink, your initial main size is 0.

Instead use:

button
{
    flex: 1 0 0%;
}

Also, btw, the text overflow was also happening in Chrome 46.