Chrome のフレックスボックス列の子で「height: 100%」が機能しないのはなぜですか?

フレックスボックス列の子で高さ 100% が機能しない: Chrome の問題

フレックスボックスでは、子要素が利用可能な高さを満たす必要があることが期待されますheight:100% プロパティで指定されたとおりです。ただし、親要素がフレックスボックス列である場合、Chrome ではこの動作が壊れます。

この例では、次のコードはフレックスボックス列レイアウトを作成することを目的としています。

.flexbox {
  display: flex;
  flex-direction: column;
  height: 100%;
}

そして、子要素は利用可能な高さを満たすように設定されています:

.flex-child {
  height: 100%;
}

ただし、Chrome では、子要素は height:100% プロパティに応答せず、高さが未定義のままになります。

解決策:

この問題は次を変更することで解決できます:

1. 親要素 .flex を表示: flex に設定します。これは、ブラウザにフレックスボックス レイアウトを使用するよう明示的に指示する重要な手順です。
2. 子要素 .flex-child から height: 100% プロパティを削除します。これにより、ブラウザが指定されていない親の高さにパーセンテージ値を適用しようとすることによって引き起こされる混乱が解消されます。

説明:

フレックスボックスは仕様に忠実に従います。 。 flexed 要素のデフォルトである align-self: ストレッチ値は、cross-size プロパティ (この場合は高さ) の「使用される」値のみを変更し、その「指定された」値は変更しません。一方、パーセンテージは、親のクロスサイズ プロパティの指定された値に基づいて計算されます。

.flex には指定された高さがないため、.flex- で高さを 100% に設定しようとします。 child は .flex の指定されていない高さの 100% になります。これは本質的に「自動」です。これにより、ブラウザは意図を誤って解釈します。

.flex を display: flex に設定することで、ブラウザにフレックスボックス レイアウトの使用を強制し、要素が正しくレイアウトされるようにします。さらに、.flex-child の height: 100% プロパティを削除すると、要素はその親である .flex.

の指定された高さを継承できるようになります。この解決策は .flex のスペース全体を埋める場合には機能しますが、.flex の一部のみを埋める場合には機能しない可能性があります。このような場合、絶対配置または複数のフレックスボックスの子を使用した回避策が必要になる場合があります。

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