Question

我设计了一个100％宽度100％高度布局的css3 flexbox，它适用于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>

Answer 1

tl; dr：您的min-height:0规则中需要.level-0-row2。（Here's a codepen with that fix。）

更详细的说明：

Flex项目建立一个默认的最小大小，该大小基于其子级的内在大小（不考虑其子级/后代的“溢出”属性）。

每当你在flex项目的中有overflow: [hidden|scroll|auto] 的元素时，你需要给它的祖先flex项min-width:0（在水平的flex容器中）或者min-height:0（在垂直弹性容器中），禁用此最小化行为，否则flex项将拒绝缩小小于子项的最小内容大小。

有关被此咬过的网站的更多示例，请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=1043520。（请注意，在实施此规范文本后，这只是跟踪被此类问题打破的网站的代谢组合 - 它实际上并不是Firefox中的错误。）

~~你不会在Chrome中看到这一点（至少在发布时不会这样），因为他们haven't implemented this minimum sizing behavior yet。~~（编辑：Chrome现在已经实现了这种最小化行为，但是他们可能仍然incorrectly collapse min-sizes to 0 in some cases。）

Answer 2

最近我找到了一个更好的解决方案：

而不是使用：

flex:1 1 auto;
min-height: 0;

最好使用：

flex:1 1 0;

基本上，这告诉浏览器将元素的大小最初设置为 0（因此替换 min-height）并允许它以 1 的比例扩展。

Kevin Powell 有一个非常好的视频来解释 flexbox 的工作原理，我强烈推荐观看 (https://www.youtube.com/watch?v=fm3dSg4cxRI) 它详细解释了 flexbox 算法的工作原理。

firefox overflow-y不能使用嵌套的flexbox

2 个答案: