8

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:

grid

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jesse
  • 1,332
  • 2
  • 14
  • 25

1 Answers1

12

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:

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:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701