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