子フレックス項目のパーセンテージパディングが親フレックスコンテナを壊すのはなぜですか?

パーセンテージ パディングがフレックス項目を分割する理由

console.log(document.querySelector('ul').offsetWidth);

要素はフレックス項目としてスタイル設定されます。この

内では、数
• フレックス項目ではない要素。パーセントパディングが
• に適用される場合、要素、
  要素は複数の行に分割されます。ただし、固定パディング (例: 30px) が使用される場合、

  この動作を理解するために、パーセンテージ パディングに関連する計算を詳しく調べます。パディングのパーセンテージ値は、それを含むブロックの幅に相対的です。ただし、包含ブロックの幅はその内容によって決まります。
  この場合、
  の幅は の幅になります。
  • の内容に基づいて計算されます。要素。この幅を取得するには、次のコードを使用します。幅を計算する前にパディングの割合を決定できないことが複雑です。したがって、最初にコンテンツに基づいて幅を計算します。したがって、パーセンテージ パディングが使用されると、ブラウザーは含まれるブロックの幅を決定するのに苦労し、結果として複数行の動作が発生します。対照的に、固定パディングでは幅が明示的に定義されるため、この問題は解消されます。

  以上が子フレックス項目のパーセンテージパディングが親フレックスコンテナを壊すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。