親要素に `max-height` があるときに、子要素が `max-height: 100%` でオーバーフローするのはなぜですか?

max-height: 100% での予期しないオーバーフローの問題

指定された例では、max-height が 100% の子要素指定された最大高さで親コンテナをオーバーフローさせます。この一見予期せぬ動作により、このようなシナリオにおける max-height の性質について疑問が生じます。

問題の核心は、子要素の max-height の計算にあります。 max-height がパーセンテージとして設定されている場合、最大高さではなく、親の実際の高さのパーセンテージとして解釈されます。親に明示的な高さが指定されていない場合、親の実際の高さは定義されていないため、子の最大高さはデフォルトでなしになります。

子に最大高さが強制されていないため、自由に設定できます。コンテンツの最大限まで成長します。画像の場合、通常、垂直アスペクト比が水平アスペクト比よりも大きく、画像は固有のアスペクト比を維持しながら、コンテナの高さから下にオーバーフローします。

この予期しない動作に対する解決策は、明示的に次のとおりです。親要素の高さを定義します。そうすることで、子の最大高さの計算用に固定高さの基準点が確立されます。これにより、子はアスペクト比を維持しながら指定された高さ制限内に収まり、オーバーフローが防止されます。

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