フレックスボックス列で高さのパーセンテージが期待どおりに機能しないのはなぜですか?

フレックスボックス列の高さのパーセンテージの問題

フレックスボックス レイアウトでは、フレックスボックス列の子にその高さを埋めたいことがよくあります。ただし、高さをパーセンテージに設定すると期待した結果が得られないという問題が発生する可能性があります。

説明

フレックスボックスの仕様によれば、要素のクロスサイズ プロパティ(この場合は高さ) は、指定された値と使用された値を使用します。高さのパーセンテージは、使用されている高さではなく、親の指定された高さに基づいて計算されます。

解決策

Chrome でこの問題に対処するには:

1. 親コンテナ (.flex) を表示するように設定します: flex.
2. 高さを削除します: 100%;子要素 (.flex-child) のルール。

例:

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

.flex {
  background: blue;
  flex: 1;
  display: flex; /* Added */
}

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

部分充填の代替アプローチ

親コンテナの一部のみを埋めたい場合は、追加のフレックス子が必要です。 (.spacer) を追加して、残りのスペースを占有することができます。

.flex-child {
  flex: 9;
}

.spacer {
  flex: 1;
}

結論

指定された値と使用された値の違いを理解することで、開発者はパーセンテージを克服できますフレックスボックス列の高さの問題。場合によってはブラウザー固有の回避策が必要になる場合がありますが、仕様の更新により将来的にこれらの制限が解決されることが期待されます。

以上がフレックスボックス列で高さのパーセンテージが期待どおりに機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。