Flex item with 0% basis overflows on IE11

问题

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?

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

来源：https://stackoverflow.com/questions/33629469/flex-item-with-0-basis-overflows-on-ie11