Doctype breaks flexbox layout

Question

When I add an ad at the top of my page, the flexbox layout crashes, when I remove the doctype, it works as expected. The problem occurs in chrome / firefox / ie.

.grid {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  flex-grow: 1;
  border: 1px solid black;
}
.row {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
}
.cell {
  flex-grow: 1;
  border: 1px solid black;
}

<div class="grid">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Run codeHide result

https://plnkr.co/edit/jKklf2zeYBjOgTsSQnvr

What it should look like:

Answer 1

Include doctype and add this to your CSS:

html, body { height: 100%; }

When using percentage heights, you must specify the height for all parent elements down to the root element. More details here:

• Work with CSS Property heightand Percentage

doctype, , auto. :

• CSS, DOCTYPE