ChromeのFlexboxコンテナの高さが100％にならない

Question

別のフレックスコンテナ内のFlexboxカラムコンテナはChromeでは100％の高さになりませんが、FirefoxとEdgeではすべてokです。

Codepen example

.container { 
    display: flex; 
    flex-direction: column; 

    height: 100%; 
    width: 100%; 

    .inside-container { 
    display: flex; 
    flex-direction: column; 

    height: 100%; 

    } 
} 

Answer 1

あなたは親要素のheight: 100%を逃している：<header>

あなたはそれをで追加すると、レイアウトが同様に、Chromeで動作します。

header { 
    min-height: 100%; 
    width: 100%; 
    height: 100%; /* NEW */ 
} 

Revised Codepen

率の高さを使用している場合、Chromeは各親要素が定義された高さを持っていることが必要です。ここでは詳細：フレキシボックスに割合の高さを使用する場合

• Working with the CSS height property and percentage values

、主要なブラウザ間のレンダリングの違いがあります。ここでは詳細：

• Chrome/Safari not filling 100% height of flex parent