Percentage height not working in nested flexbox layout in Chrome

Question

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>

score 5 · Accepted Answer · edited May 23 '17 at 12:31

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:

Heights rendering differently in Chrome and Firefox

Oh, I entirely forgot about this question (shame on me), I already got it solved in Angular Material ticket on GitHub. However I believe this will help some other people as well (or possible the future me). Thank you for a thorough answer. — monnef, Sep 15 '15 at 05:32

score 0 · Answer 2 · answered Jun 28 '22 at 06:39

you missed to mention height of .item3 class in percentage, we should make sure parent should have height in percentage unit then only child height in percentage will work.

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;
  height: 100%;
}

.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>

Percentage height not working in nested flexbox layout in Chrome

2 Answers2

Linked