「max-height: 100%」を持つ子要素が、「max-height」を持つ親要素からオーバーフローするのに、明示的な高さではオーバーフローしないのはなぜですか?

max-height が 100% の子要素のオーバーフロー

この問い合わせでは、予期しない動作: max-height が 100 に設定された子要素を調べます。 % 親も max-height を使用しているにもかかわらず、親コンテナがオーバーフローします。ただし、親に明示的な高さが割り当てられている場合、このオーバーフローは防止されます。

問題の理解

通常、max-height が子のパーセンテージとして指定されている場合、要素では、親の実際の高さのパーセンテージを表します。ただし、親の明示的な高さが指定されていない場合、子の最大高さは未定義になり、親の最大高さを超えることができます。

オーバーフローへの影響

この特定のシナリオでは、親の max-height は 200px ですが、子の max-height は 100% です。親に明示的な高さが指定されていない場合、その実際の高さは未定義のままです。その結果、子の最大高さは計算されず、無限に成長することが可能になります。子のコンテンツ (幅よりも高い高さの画像) は親の最大幅内に収まらないため、下にオーバーフローします。

解決策: 明示的な親の高さ

このオーバーフローを防ぐには、親要素に明示的な高さ (例: 200px) を指定する必要があります。これにより、子の最大高さを計算するための明確な基準点が確立され、親の実際の高さを超えず、最大高さの制約内に収まるようになります。

以上が「max-height: 100%」を持つ子要素が、「max-height」を持つ親要素からオーバーフローするのに、明示的な高さではオーバーフローしないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。