基础为 0% 的 Flex 项目在 IE11 上溢出

Question

从这个简单的代码笔中可以看出：http://codepen.io/anon/pen/Mazjyv，有一个按钮，它是一个弹性项目，flex-basis 为 0%。

在其他浏览器中，内容不会溢出按钮容器，但在 IE11 上会溢出。

知道这是为什么吗？

Answer 1

问题出在这条规则上：

button
{
    flex: 0 0 0%;
}

你是在告诉button：不要增长、不要缩小、你的初始主尺寸是0.

改为使用：

button
{
    flex: 1 0 0%;
}

此外，顺便说一句，文本溢出也发生在 Chrome 46.

Flex item with 0% basis overflows on IE11