css - 基础为 0% 的 Flex 元素在 IE11 上溢出

Question

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

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

知道这是为什么吗？

Answer 1

问题是这条规则:

button
{
    flex: 0 0 0%;
}

您是在告诉按钮:不要增长，不要缩小，您的初始主尺寸是 0 .

改为使用:

button
{
    flex: 1 0 0%;
}

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