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

子要素の最大高さ: 100% が親の高さを超えています

予期しないシナリオで、子要素の最大高さ: 100% が発生しましたコンテナには最大高さがあるにもかかわらず、コンテナがオーバーフローします。この矛盾は、コンテナの高さが明示的に定義されていない場合に発生します。

説明の詳細

子要素の max-height をパーセンテージとして指定する場合、それは次のことを指します。親の最大高さではなく、実際の高さです。明示的なコンテナーの高さが存在しない場合、このパーセンテージの計算では何も計算されず、事実上、子が無限に拡大することが可能になります。

子に残る唯一の制約は、親の最大幅です。画像は幅よりも高さが高いため、サイズを最大化しながらアスペクト比を維持するためにコンテナの高さをオーバーフローします。

明示的な親の高さによる解決

親の高さが明示的に定義されている場合、子の最大高さは指定された値の 100% に正しく制限されます。これにより、アスペクト比を守りながら、子がコンテナの高さ内に留まることが保証されます。したがって、max-height: 100% を使用するときに子が親をオーバーフローしないようにするには、親の高さを明示的に設定する必要があります。

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