1. 首页
  2. 问题
  3. firefox溢出-y不适用于嵌套的flexbox
一尘不染

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

css

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

但是Firefox（35.0.1），overflow-y无法正常工作。如您在此Codepen中所见：

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>

阅读 235

收藏
2020-05-16

共1个答案

一尘不染

TL;博士：你需要min-height:0在你的.level-0-row2规则。

更详细的解释：

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

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

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

2020-05-16