在Chrome中嵌套式flexbox布局中无法使用的百分比高度 [英] Percentage height not working in nested flexbox layout in Chrome
问题描述
我有一个下面的布局在Firefox和IE中完全工作：
我试过这种方法，但没有任何运气。任何想法如何解决这个问题在Chrome上，而不破坏它在其他浏览器？
html，body {height：97％; margin：0; padding：0;} div {border：10px dotted teal;}。container {display：flex; border-color：番茄; 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％;这是折叠框 - >
...
...
...
根据 CSS规范，使用百分比设置时元素的 height （就像您在使用 .container ），父元素 em>也有一个显式的高度。参考您的折叠 div ，其父级（ .item3 ）没有定义的高度。
从 spec ：
< percentage>
到生成的框的包含块的高度
。如果未明确指定
包含块的高度（即，它取决于
内容高度），并且该元素不是绝对定位的，则
值计算为'auto'。
自动
高度取决于其他属性的值。
在 height 属性中，从此示例中可以看出，Chrome将包含块定义为父，而Firefox和IE定义包含块为祖先，或者他们尊重flex高度作为百分比高度的参考。因此，由于 div 与深蓝色边框（ .container列c2 ）没有内容，其父级没有指定的高度，则没有高度，
但是，通过指定 .item3 的高度，这是折叠框的父级，高度适用于所有浏览器。
UPDATE
更多详情：
I have a following layout fully working in Firefox and IE:
Unfortunately it is quite broken in Chrome, namely the dark blue container is collapsed even though it has height 100% of its parent:
I tried this approach, but without any luck. Any ideas how to fix this on Chrome without breaking it in other browsers?
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>
The question says:
I have a following layout fully working in Firefox and IE. Unfortunately it is broken in Chrome, namely the dark blue container is collapsed even though it has height 100% of its parent.
Actually, an argument could be made that the opposite is true: Chrome has it right, while Firefox and IE are "broken".
First, here's the solution:
.item3 { height: 100%; }
Now let's look at your document structure and the heights applied:
<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 -->
...
...
...
As per the CSS specification, when using percentages to set the height of an element (like you are doing with .container), the parent element must also have an explicit height. In reference to your collapsed div, its parent (.item3) does not have a defined height.
From the spec:
<percentage>
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.auto
The height depends on the values of other properties.
In terms of the height property, it would appear from this example that Chrome defines "containing block" as "parent", while Firefox and IE define "containing block" as "ancestor", or they respect flex heights as a reference for percentage heights.
Hence, since the div with the dark blue border (.container column c2) has no content, and its parent has no specified height, then there is no height and the box collapses in Chrome.
However, by specifying a height for .item3, which is the parent of the collapsed box, the height works on all browsers.
UPDATE
More details:
这篇关于在Chrome中嵌套式flexbox布局中无法使用的百分比高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
