Percentage Height Not Working In Nested Flexbox Layout In Chrome
Solution 1:
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% --><divclass="container"><!-- height: 100%; --><divclass="item3"><!-- height: ?? --><divclass="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'.
autoThe 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:
Post a Comment for "Percentage Height Not Working In Nested Flexbox Layout In Chrome"