Doctype中断了flexbox布局

Question

当我在页面顶部添加声明时,我的flexbox布局将崩溃,当我删除doctype时,它按预期工作.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

应该是什么样的:

Answer 1

包含doctype并将其添加到CSS:

html, body { height: 100%; }

使用百分比高度时,必须为所有父元素指定一个高度,包括根元素.在这里阅读更多:

• 使用CSS height属性和百分比值

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

• CSS高度属性,百分比值和DOCTYPE