web-dev-qa-db-ja.com

FlexboxのコンテナChromeの高さが100％になりません

別のフレックスコンテナー内のフレックスボックス列コンテナーは、Chromeでは100％の高さを取得しませんが、FirefoxおよびEdgeではすべて問題ありません。

コードペンの例

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

  height: 100%;
  width: 100%;

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

    height: 100%;

  }
}
cssgoogle-chromefirefoxflexbox
7
fotonmoton

親要素にheight: 100%がありません：<header>

これを追加すると、レイアウトはChromeでも機能します。

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

改訂されたコードペン

高さのパーセンテージを使用する場合、Chromeでは、各親要素に高さが定義されている必要があります。詳細はこちら：

フレックスボックスで高さのパーセンテージを使用する場合、主要なブラウザ間でレンダリングに違いがあります。詳細はこちら：

17
Michael_B