フレックスボックス列の子が Chrome の高さの 100% を占めないのはなぜですか?

フレックスボックス列の子の高さ 100%

問題は、フレックスボックス仕様の競合に起因しており、高さのパーセンテージの計算方法に影響します。クロム。フレックスボックスの仕様によれば、align-self がストレッチ (フレックス要素のデフォルト) に設定されている場合、要素のクロスサイズ プロパティ (この場合は高さ) の使用値が調整されます。ただし、パーセンテージは、使用された値ではなく、親のクロスサイズ プロパティの指定された値に基づいて動作します。

この例では、.flex 要素の CSS は flex: 1 に設定されています。これは、それを意味します。利用可能なスペースをすべて占有します。 .flex-child 要素の高さ設定は 100% です。これは、フレックス親の指定された高さに基づいて計算された、使用可能な高さの 100% を占めることを意味します。ただし、.flex の高さは明示的に設定されていないため、デフォルトは auto になります。その結果、Chrome は .flex-child の高さを auto の 100% として解釈します。そのため、.flex 要素全体が埋められません。

この問題を解決するには、次のことを行う必要があります。

1. .flex を表示するように設定します: flex;フレックス コンテナとして認識されるようにします。
2. 高さを削除します: 100%; .flex-child からのステートメント。

これにより、.flex-child が親の .flex 要素の高さ全体を埋めることができます。

ただし、この解決策は次の場合には機能しない可能性があります。 .flex の一部のみを埋めようとしています。このような場合、2 番目の .spacer 子を flex: 1 で .flex に追加し、 .flex-child を flex: 9 に設定するなどの回避策を採用する必要があります。これはあまり洗練されていないオプションですが、問題に対処するための回避策です。

この問題は Chrome に固有のものであり、他のブラウザでは発生しない可能性があることに注意してください。将来のフレックスボックス仕様の更新により、この不一致が解決され、ブラウザ間の互換性が向上することが期待されています。

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