Chrome 中的嵌套 Flexbox 布局中的百分比高度不起作用
mon*_*nef 6 html css google-chrome flexbox
我有一个在 Firefox 和 IE 中完全正常工作的以下布局：
不幸的是，它在 Chrome 中被破坏了，即深蓝色容器被折叠，即使它的高度是其父容器的 100%：
我尝试过这种方法，但没有任何运气。有什么想法如何在 Chrome 上修复此问题而不在其他浏览器中破坏它吗？
html,
body {
height: 97%;
margin: 0;
padding: 0;
}
div {
border: 10px dotted teal;
}
.container {
display: flex;
border-color: tomato;
height: 100%;
}
.row {
flex-flow: row;
}
.column {
flex-flow: column;
}
.item1 {
flex: 1;
}
.item2 {
flex: 2;
}
.item3 {
flex: 3;
}
.c1 {
border-color: gold;
}
.c2 {
border-color: darkblue;
}<div class="container">
<div class="item3">
<div class="container column c2">
<div class="item1 c1"></div>
<div class="item3"></div>
</div>
</div>
<div class="item1 c1"></div>
<div class="item2"></div>
</div>问题说：
我有一个在 Firefox 和 IE 中完全工作的以下布局。不幸的是，它在 Chrome 中被破坏了，即深蓝色容器被折叠，即使它的高度是其父容器的 100%。
实际上，可以说事实恰恰相反：Chrome 是正确的，而 Firefox 和 IE 则“有问题”。
首先，这是解决方案：
.item3 { height: 100%; }
现在让我们看看您的文档结构和应用的高度：
<html> <!-- height: 97% -->
<body> <!-- height: 97% -->
<div class="container"> <!-- height: 100%; -->
<div class="item3"> <!-- height: ?? -->
<div class="container column c2"> <!-- height: 100% ; this is the collapsed box -->
...
...
...
根据CSS规范，当使用百分比来设置height元素的高度时（就像您使用的那样.container），父元素也必须具有明确的高度。关于您的已折叠div，其父级 ( .item3) 没有定义的高度。
从规格来看：
<percentage>
百分比是根据生成的盒子的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素未绝对定位，则该值计算为“auto”。auto
高度取决于其他属性的值。
就属性而言height，从这个例子中可以看出，Chrome 将“包含块”定义为“父级”，而 Firefox 和 IE 将“包含块”定义为“祖先”，或者它们将 Flex 高度作为百分比高度的参考。
因此，由于div带有深蓝色边框 ( .container column c2) 的 没有内容，并且其父级没有指定高度，因此在 Chrome 中没有高度并且框会折叠。
但是，通过指定 的高度（.item3折叠框的父级），该高度适用于所有浏览器。
更新
更多细节：
| 归档时间： |
|
| 查看次数： |
4522 次 |
| 最近记录： |