Mengapa Elemen Kanak-kanak dengan `max-height: 100%` Melimpahi Induknya dengan `max-height` tetapi Tidak dengan Explicit Height?

Kanak-kanak Melimpah dengan ketinggian maksimum: 100%

Siasatan ini mengkaji tingkah laku yang tidak dijangka: elemen kanak-kanak dengan ketinggian maksimum ditetapkan kepada 100 % melimpahi bekas induknya, walaupun induk juga menggunakan ketinggian maksimum. Walau bagaimanapun, limpahan ini dihalang apabila ibu bapa diberikan ketinggian eksplisit.

Memahami Isu

Biasanya, apabila ketinggian maksimum dinyatakan sebagai peratusan pada kanak-kanak elemen, ia mewakili peratusan ketinggian sebenar ibu bapa. Walau bagaimanapun, jika tiada ketinggian yang jelas untuk ibu bapa, ketinggian maksimum kanak-kanak menjadi tidak ditentukan, membolehkannya melebihi ketinggian maksimum ibu bapa.

Kesan pada Limpahan

Dalam senario khusus ini, ibu bapa mempunyai ketinggian maksimum: 200px, manakala kanak-kanak mempunyai ketinggian maksimum: 100%. Apabila ketinggian eksplisit tidak disediakan untuk induk, ketinggian sebenar tetap tidak ditentukan. Akibatnya, ketinggian maksimum kanak-kanak tidak dikira, membolehkannya berkembang selama-lamanya. Memandangkan kandungan kanak-kanak (imej dengan ketinggian lebih besar daripada lebarnya) tidak boleh muat dalam lebar maksimum ibu bapa, ia melimpah ke bawah.

Penyelesaian: Ketinggian Induk Eksplisit

Untuk mengelakkan limpahan ini, ketinggian eksplisit (mis., 200px) mesti diberikan kepada elemen induk. Ini mewujudkan titik rujukan yang jelas untuk pengiraan ketinggian maksimum kanak-kanak, memastikan ia tidak melebihi ketinggian sebenar ibu bapa dan kekal dalam kekangan ketinggian maksimumnya.

Atas ialah kandungan terperinci Mengapa Elemen Kanak-kanak dengan `max-height: 100%` Melimpahi Induknya dengan `max-height` tetapi Tidak dengan Explicit Height?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!