firefox溢出-y不适用于嵌套的flexbox

Question 1

我已经使用css3 flexbox设计了一个100％宽度100％高度的布局，该布局可在IE11上运行（如果对IE11的仿真正确，则可能在IE10上运行）。

但是Firefox（35.0.1），overflow-y无法正常工作。如您在该Codepen中所见：http ://codepen.io/anon/pen/NPYVga

Firefox无法正确渲染溢出。它显示一个滚动条

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.level-0-container {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; 
}
.level-0-row1 {
  border: 1px solid black;
  box-sizing: border-box;
}
.level-0-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.level-1-col1 {
  width: 20em;
  overflow-y: auto;
}
.level-1-col2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 4px solid blue;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.level-2-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 4px solid red;
  box-sizing: border-box;
  overflow-y: auto;
}

<html>
<body>

    <div class="level-0-container">

        <div class="level-0-row1">
            Header text
        </div>

        <div class="level-0-row2">

            <div class="level-1-col1">
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                
            </div>

            <div class="level-1-col2">

                    <div class="level-2-row1">
                        Some text
                        <p/> Some text 2
                        <p/> Some text 3
                        <p/> 
                    </div>

                    <div class="level-2-row2">
                        <p>some text</p>
                        <p>some text</p> 
                        <p>some text</p> 
                        <p>some text</p>
                        <p>some text</p>
                        <p>some test</p>
                    </div> 
                </div>

        </div>

    </div>
</body>


</html>

展开摘要

Question 2

TL;博士：你需要min-height:0在你的.level-0-row2规则。（这是一个带有该修复程序的codepen。）

更详细的解释：

弹性项根据其子项的固有大小（不考虑其子项/后代的“溢出”属性）建立默认的最小大小。

每当元素overflow: [hidden|scroll|auto] 在flex项目内部时，都需要给它的祖先flex项目min-width:0（在水平flex容器中）或min-height:0（在垂直flex容器中）以禁用此最小缩放行为，否则，flex项将拒绝缩小到小于孩子的最小内容尺寸。

请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=1043520，以了解被此网站咬伤的更多示例。（请注意，在实施此规范文本之后，这只是一个metabug，用于跟踪被此类问题破坏的网站-实际上，这并不是Firefox中的错误。）

~~您不会在Chrome中看到此信息（至少在发布时尚未看到此信息），因为他们尚未实现此最小尺寸设置行为。~~（编辑：Chrome现在已经实现了这种最小化行为，但在某些情况下，它们仍可能会错误地将最小大小折叠为0。）