monnef monnef - 6 months ago 30
CSS Question

Percentage height not working in nested flexbox layout in Chrome

I have a following layout fully working in Firefox and IE:
Firefox

Unfortunately it is quite broken in Chrome, namely the dark blue container is collapsed even though it has height 100% of its parent:
Chrome

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>




Answer

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.

DEMO


UPDATE

More details: