firefox overflow-y不使用嵌套flexbox
我已经用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>共有2个答案
最近我找到了一个更好的解决方案：
而不是使用：
flex:1 1 auto;
min-height: 0;
最好使用：
flex:1 1 0;
基本上，这告诉浏览器最初将元素的大小设置为0（因此替换最小高度），并允许它以1的比例扩展。
凯文·鲍威尔（Kevin Powell）有一段很好的视频来解释flexbox是如何工作的，我强烈推荐观看(https://www.youtube.com/watch?v=fm3dSg4cxRI)它详细解释了flexbox算法的工作原理。
tl； dr：你需要min-high： 0在你的. level-0-row2规则中。（这里有一个修复的代码。）
更详细的解释：
Flex项根据其子级的固有大小（不考虑其子级/后代上的溢出属性）建立默认的最小大小。
每当您在flex项目中有一个带有溢出的元素：[隐藏|滚动|自动]时，您都需要给它的祖先flex项目min-size： 0（在水平flex容器中）或min-高： 0（在垂直flex容器），以禁用此最小大小行为，否则flex项将拒绝收缩小于子内容的最小大小。
看见https://bugzilla.mozilla.org/show_bug.cgi?id=1043520如需了解更多受此影响的网站示例。（请注意，这只是一个metabug，用于跟踪在实现此规范文本后被此类问题破坏的站点——实际上它在Firefox中不是一个bug。）
你不会在Chrome中看到这一点（至少，在这篇文章中没有），因为他们还没有实现这种最小尺寸行为
（编辑：Chrome现在已经实现了这种最小尺寸行为，但在某些情况下，它们仍可能错误地将最小尺寸折叠为0。）
-
问题内容： 我已经使用css3 flexbox设计了100％宽度100％高度的布局，该布局可在IE11上使用（如果对IE11的仿真正确，则可能在IE10上使用）。 但是Firefox（35.0.1），overflow-y无法正常工作。如您在此Codepen中所见： Firefox无法正确渲染溢出。它显示一个滚动条 问题答案： TL;博士：你需要在你的规则。 更详细的解释： 弹性项根据其子项的固有大
-
我被困在将嵌套JS与宇宙数据库核心SQL API集成上。我知道有一个用于 Cosmos DB 的模块（https://github.com/nestjs/azure-database），但我需要数据架构来支持嵌套的 json，如下所示： 我认为@nestjs/azure-database不支持这一点(或者我可能错了),因为当我检查他们的示例和quickstart时，没有这样的json模式的示例。
-
我正在寻找HAL中嵌套_embedded如何使用Spring HATEOAS API编程的例子。最佳实践是什么？ 下面是我想要实现的一个例子：
-
主要内容：Java11 嵌套类的示例,输出结果为Java 11 引入了嵌套类的概念，我们可以在类中声明一个类。这种类的嵌套允许在一个地方对要使用的类进行逻辑分组，使它们更具可读性和可维护性。嵌套类可以有四种类型 - 静态嵌套类 非静态嵌套类 本地类 匿名类 Java 11 还提供了嵌套的概念，以允许嵌套类的通信和验证。 Java11 嵌套类的示例 ApiTester.java 输出结果为
-
如何使用jolt转换将平面JSON转换为嵌套JSON？我对JSON和jolt是新手。 输入： 预期输出： 编辑:我想在< code>SubFunds中添加一个新字段，但是新字段不在JSON文件中，它是计算字段，我可以按原样添加示例吗 并重命名字段：
-
我试图在脚本分数中使用嵌套值，但我在使它工作时遇到了问题，因为我无法通过doc访问它来迭代字段。此外，当我尝试在Kibana中像< code > _ type:images AND _ exists _:colors 一样查询它时，它不会匹配任何文档，即使当我单独查看所有文档时，该字段都清楚地出现在它们中。不过，我可以使用参数来访问它。_source，但是我看过可以慢一点慢一点，真的不推荐。 我知