ホームページ >ウェブフロントエンド >CSSチュートリアル >「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 サイトの他の関連記事を参照してください。