Chrome のフレックスボックス列で「height: 100%」が期待どおりに機能しないのはなぜですか?

フレックスボックス列の高さの問題: Chrome の癖

フレックスボックス列では、高さのパーセンテージを使用して子要素のサイズを調整するときに問題が発生する可能性があります。この問題は、Chrome のフレックスボックス仕様の処理における特殊な点に起因します。

次の例を考えてみましょう。

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

.flexbox {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex {
  background: blue;
  flex: 1;
}

.flex-child {
  background: red;
  height: 100%;
  width: 100%;
  display: block;
}

.static {
  background: green;
  width: 100%;
  height: 5rem;
}

赤色の .flex-child 要素が青色の .flex 親の高さ全体。ただし、高さ:100% は意図したとおりに機能しません。

解決策:

この問題を解決するには:

1. .flex を変更します。表示するには: flex.
2. 高さ:100% を削除.flex-child.

この調整により、.flex-child が .flex.

内のスペース全体を埋めるようになります。技術的背景:

フレックスボックスでは、align-self:stretch (デフォルト) がフレックスボックスのクロスサイズプロパティ (ここでは高さ) を決定します。 要素。ただし、パーセンテージでは、使用される値ではなく、指定されたクロスサイズ値が使用されます。この場合、.flex-child は .flex で指定された高さ (デフォルトでは自動) の 100% を占有しようとします。これにより、レイアウト エンジンが混乱します。

.flex を表示に設定する: flex は、デフォルトの動作をオーバーライドし、高レベルの CSS が .flex のサイズを決定できるようにすることで問題を解決します。

例外:

.flex を部分的に埋めたい場合、この解決策は機能しません。これを実現するには、flex:1 を使用して .flex 内に .spacer 要素を追加し、flex-child を flex:9 (および .flex の flex-direction:column) に設定します。ただし、これはハッキングであり、将来のブラウザのアップデートでこの問題が解決されることが期待されています。

以上がChrome のフレックスボックス列で「height: 100%」が期待どおりに機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。