Percentage height not working in flexbox layout in Chrome
I have the following layout, fully working in Firefox and IE:
Unfortunately, in Chrome it is heavily broken, i.e. the blue container fell even though it is 100% height from its parent:
I've tried this approach , but with no 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>
source to share
The question says:
I have the following layout fully working in Firefox and IE. Unfortunately, it is broken in Chrome, namely, the blue container is discarded even if it is 100% height from its parent.
Actually, the argument can be made that the opposite is true: Chrome has this right, and Firefox and IE are "broken".
First, here's the solution:
.item3 { height: 100%; }
Now let's look at the structure of your document and the heights to apply:
<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 spec , when using percentages to set an height
element (like you do with .container
), the parent element must also have an explicit height. With respect to your stacked, div
its parent ( .item3
) does not have a specific height.
From the spec :
<percent> The
percentage is calculated relative to the height of the created block containing the block. If the height of the containing block is not explicitly specified (ie depends on the height of the content), and the element is not absolutely positioned, the value evaluates to "auto".auto
The height depends on the values of other properties.
In terms of a property height
, you'll see 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 div
with dark blue border ( .container column c2
) has no content and its parent has no specified height, then there is no height and the window crashes in Chrome.
However, by specifying a height for .item3
which is the parent of the collapsed box, the height works in all browsers.
UPDATE
More details:
source to share