両方に「max-height: 100%」があるにもかかわらず、子要素が親要素からオーバーフローするのはなぜですか?

Max-Height 100% にもかかわらず、子が親から溢れている

コンテナ内に max-height 100% の子要素があり、 max-height を利用します。予期せず、子要素が親要素からオーバーフローしてしまいます。

動作を理解する

この問題は、最大高さのパーセンテージを定義するときに、子の場合、これは親の最大高さではなく、実際の身長のパーセンテージを指します。したがって、親要素に明示的な高さが設定されていない場合、子要素の最大高さの計算に使用される基本の高さは定義されません。その結果、max-height のデフォルトは「none」となり、子要素は無制限に拡大できます。

この場合、子に対する唯一の制限は親の max-width です。画像は幅よりも高さの方が高いため、全体のサイズを最大化しながらアスペクト比を維持するために、コンテナの高さを下方向にオーバーフローさせます。

解決策: 明示的な高さ

この問題を解決するには、親要素に明示的な高さを指定するだけです。これにより、子要素の最大高さを計算するための明確な基本高さが確立されます。その結果、子要素はアスペクト比を維持しながら親の高さに制限されます。

したがって、親要素に明示的な高さを指定すると、子要素が最大高さの制限を遵守するようになり、高さの制限が回避されます。容器から溢れないようにしてください。

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