Doctype中断了flexbox布局

Question

当我在页面顶部添加声明时，我的flexbox布局将崩溃，当我删除doctype时，它按预期工作。 chrome / firefox / ie中出现问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

https://plnkr.co/edit/jKklf2zeYBjOgTsSQnvr

应该是什么样的：

Answer 1

包含doctype并将其添加到您的CSS：

html, body { height: 100%; }

使用百分比高度时，必须为所有父元素指定一个高度，包括根元素。在这里阅读更多内容：

• Working with the CSS height property and percentage values

当您删除doctype时，浏览器会进入 quirks模式，并在父级的高度为auto时解析元素相对于视口的百分比高度。在这里阅读更多内容：

• CSS height property, percentage values & DOCTYPE