Mengapa Elemen Anak Saya Melimpahi Induknya Walaupun Kedua-duanya Mempunyai `max-height: 100%`?

Ibu Bapa Melimpah Anak Walaupun Ketinggian Maks 100%

Pertimbangkan situasi di mana anda mempunyai elemen anak dengan ketinggian maksimum 100% di dalam bekas yang juga menggunakan ketinggian maksimum. Tanpa diduga, elemen anak akhirnya melimpahi ibu bapa.

Memahami Tingkah Laku

Isu ini berpunca daripada fakta bahawa apabila anda menentukan peratusan untuk ketinggian maksimum pada kanak-kanak, ia merujuk kepada peratusan ketinggian sebenar ibu bapa, bukan ketinggian maksimumnya. Oleh itu, apabila elemen induk tidak mempunyai set ketinggian yang jelas, tiada ketinggian asas yang ditentukan untuk pengiraan ketinggian maks elemen kanak-kanak. Akibatnya, ketinggian maks lalai kepada "tiada", membenarkan elemen kanak-kanak berkembang selama-lamanya.

Dalam kes ini, satu-satunya sekatan ke atas kanak-kanak itu ialah lebar maksimum induknya. Memandangkan imej lebih tinggi daripada lebar, ia melimpahi ketinggian bekas ke arah bawah untuk mengekalkan nisbah bidang sambil memaksimumkan saiz keseluruhannya.

Penyelesaian: Ketinggian Eksplisit

Untuk menyelesaikan isu ini, anda hanya perlu memberikan ketinggian yang jelas kepada elemen induk. Dengan berbuat demikian, anda mewujudkan ketinggian asas yang jelas untuk pengiraan ketinggian maks elemen kanak-kanak. Akibatnya, elemen anak akan dihadkan pada ketinggian ibu bapa sambil masih mengekalkan nisbah bidangnya.

Oleh itu, menentukan ketinggian eksplisit untuk elemen induk memastikan elemen anak mematuhi sekatan ketinggian maksimumnya, menghalang ia daripada melimpahi bekas.

Atas ialah kandungan terperinci Mengapa Elemen Anak Saya Melimpahi Induknya Walaupun Kedua-duanya Mempunyai `max-height: 100%`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!