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

【问题标题】：firefox overflow-y not working with nested flexboxfirefox overflow-y 不能使用嵌套的 flexbox
【发布时间】：2023-03-22 05:00:01
【问题描述】：

我用 css3 flexbox 设计了一个 100% 宽 100% 高的布局，它可以在 IE11 上运行（如果 IE11 的模拟正确，也可以在 IE10 上运行）。

但是 Firefox (35.0.1)，overflow-y 不起作用。正如您在此代码笔中看到的： 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>

【问题讨论】：

标签： css firefox overflow flexbox

【解决方案1】：

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

更详细的解释：

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

只要你有一个元素在弹性项目中在内有overflow: [hidden|scroll|auto]，你需要给它的祖先弹性项目min-width:0（在水平弹性容器中）或min-height:0（在垂直 flex 容器中），禁用此最小尺寸行为，否则 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。）

【讨论】：

我遇到了这个问题，但我必须将 min-height:0 添加到所有父 flexbox 列 - 知道为什么吗？
这个最小高度（在我的例子中）是否需要应用于每个祖先？还是只是直系父母？
它可能需要应用于每个作为 flex 项目的祖先（即父级为 display:flex 的每个祖先），具体取决于具体情况。
有什么理由不能只申请* { min-height: 0; min-width: 0; }？
@Brett，这是一个 jsfiddle，展示了过度使用 min-width:0 可能导致的不良情况（内容溢出/重叠）：jsfiddle.net/85scnr1b 所以真的，你只想添加 min-width:0如果给定的width 比预期的任意小，则其内容可以“表现得很好”的弹性项目。（min-height 和 height 也是如此，对于垂直 flex 容器。）

【解决方案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 算法的工作原理。

【讨论】：