Doctype breaks flexbox layout [duplicate]

Question

When I add the declaration at the top of my page my flexbox layout will collapse, when I remove the doctype it works as expected. 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>

https://plnkr.co/edit/jKklf2zeYBjOgTsSQnvr

What it should look like:

Answer 1

Include the doctype and add this to your CSS:

html, body { height: 100%; }

When using percentage heights, you must specify a height for all parent elements up to and including the root element. Read more here:

• Working with the CSS height property and percentage values

When you remove the doctype the browser enters quirks mode and resolves an element's percentage height relative to the viewport when the parent's height is auto. Read more here:

• CSS height property, percentage values & DOCTYPE