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

フレックスボックス列の子で高さ 100% が機能しない: ブラウザ固有のバグ

フレックスボックス列内の子要素が正しく配置されないという問題に直面しています。身長の割合には反応していません。この問題は Chrome で確認されており、他のブラウザには影響しない可能性があります。

コード サンプル内:

• .flexbox は、列方向の flexbox コンテナとして表示されるように設定されています。
• .flex は flexed 要素です。
• .flex-child はその中の子要素です.flex.

.flex-child を height: 100% に設定すると、その親である .flex.

解決策:

この問題を解決するには、次のようにします。変更:

• フレックスボックスとして表示するように .flex を変更します。 }.
• .flex-child から height: 100% スタイルを削除します。

この変更により、.flex-child 要素が .flex 内の利用可能な垂直スペースを埋めることができるようになります。

説明:

フレックスボックスの仕様align-self:stretch (フレックス要素のデフォルト) は、要素のクロスサイズプロパティ (この場合は高さ) の使用値のみに影響を与えると述べています。ただし、パーセンテージは、使用される値ではなく、親のクロスサイズ プロパティの指定された値に基づいて計算されます。

.flex には高さが指定されていないため、デフォルトの高さは「自動」です。 .flex-child を height: 100% に設定すると、Chrome は .flex の指定値 (「auto」) に基づいて高さを計算します。したがって、「auto」は「必要な大きさ」を意味するため、.flex-child の高さは 0 になります。

フレックスボックスとして表示するように .flex を変更することで、そのフレックス方向を明示的に行に設定することになります。 。これにより、.flex-child が期待どおりに .flex の高さを適切に埋めることができます。

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