Flexbox container in Chrome doesn't get 100% height

Question

Flexbox column container inside another flex container doesn't get 100% height in Chrome, but in Firefox and Edge all ok.

Codepen example

.container {
  display: flex;
  flex-direction: column;

  height: 100%;
  width: 100%;

  .inside-container {
    display: flex;
    flex-direction: column;

    height: 100%;

  }
}

Answer 1

You're missing a height: 100% on a parent element: <header>

Once you add that in, the layout works in Chrome, as well.

header {
   min-height: 100%;
   width: 100%;
   height: 100%; /* NEW */
}

Revised Codepen

When using percentage heights, Chrome requires that each parent element have a defined height. More details here:

• Working with the CSS height property and percentage values

When using percentage heights in flexbox, there are rendering differences among the major browsers. More details here:

• Chrome / Safari not filling 100% height of flex parent