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

包括文档类型和添加到您的CSS：

html, body { height: 100%; } 

使用百分比高度时，必须为所有直到并包括根元素的父元素指定高度。在这里阅读更多：

• Working with the CSS height property and percentage values

当你删除浏览器中输入怪癖模式当家长的高度auto元素的百分比高度相对解析为视的doctype。在这里阅读更多：

• CSS height property, percentage values & DOCTYPE