Css firefox overflow-y不使用嵌套flexbox

我已经用css3 flexbox设计了一个100%宽度100%高度的布局，它可以在IE11上工作（如果IE11的模拟是正确的，可能也可以在IE10上工作）

但是Firefox（35.0.1）的overflow-y不起作用。正如您在这个代码笔中看到的：

firefox未正确呈现溢出。它显示一个滚动条

html，
身体{
身高：100%；
保证金：0；
填充：0；
边界：0；
}
.0级容器{
身高：100%；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
}
.0级-第1行{
边框：1px纯黑；
框大小：边框框；
}
.第0级-第2行{
-webkit-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
边框：1px纯黑；
框大小：边框框；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒方向：水平；
-webkit盒方向：正常；
-webkit柔性方向：行；
-ms柔性方向：行；
弯曲方向：行；
}
.1级-col1{
宽度：20em；
溢出y：自动；
}
.1级-col2{
-webkit-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
边框：4px纯蓝色；
框大小：边框框；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
}
.第2级-第2排{
-webkit-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
边框：4倍纯红；
框大小：边框框；
溢出y：自动；
}

标题文本
行

行

行

行

行

行

行

行

行

行

行

行

行

一些文本
一些文本2
一些文本3

一些文本
一些文字

一些文字

一些文本

一些文本

一些测试

tl；dr:您需要在

.level-0-row2

规则中使用

最小高度：0

。（）

更详细的解释：

Flex项建立一个默认最小的大小，这是基于他们的孩子的内在大小（不考虑他们的子女/后代）“溢出”属性。

每当您在flex项目中有一个元素具有溢出：[hidden | scroll | auto]时，您需要给它的祖先flex项目

最小宽度：0

（在水平flex容器中）或

最小高度：0

（在垂直flex容器中），以禁用此最小大小调整行为，否则弹性项将拒绝收缩到小于子项的最小内容大小

请参阅，以了解更多受此影响的网站示例。（请注意，这只是一个metabug，用于跟踪在实现此规范文本后被此类问题破坏的站点——实际上它在Firefox中不是一个bug。）

---

你不会在Chrome中看到这一点（至少，在这篇文章中不会看到），因为他们会。（编辑：Chrome现在已经实现了这种最小尺寸行为，但它们可能仍然存在。）

我遇到了这个问题，但我必须将最小高度：0添加到所有父flexbox列中-知道为什么吗？这个最小高度（在我的情况下）需要应用到每个祖先吗？或者仅仅是直接的父项？它可能需要应用于作为flex项的每个祖先（即父项为

display:flex

）上，这取决于具体情况。有什么原因我们不能只应用

*{min height:0；min width:0；}

？@Brett，这里有一个jsfiddle演示了这种不良行为（内容溢出/重叠）这可能是由于过于激进地使用

min-width:0

而导致的：因此，实际上，如果给定的

width

比预期的要小，您只想在其内容可以“表现良好”的flex项目上添加

min-width:0

。（对于垂直柔性容器，

最小高度

和

高度

也是如此。）