Bagaimana untuk Menghalang Item Flex daripada Melebihi Ketinggian Induk dan Mendayakan Bar Skrol dalam Firefox?

Mencegah Item Flex daripada Melebihi Ketinggian Induk dan Mendayakan Bar Skrol dalam Firefox

Bekas fleksibel boleh menjadi sukar untuk diurus, terutamanya apabila menangani elemen kanak-kanak yang mempunyai bar skrol. Dalam Firefox, div kanak-kanak dengan sifat flex: 1 dan overflow-y: scroll cenderung melebihi ketinggian bekas flexbox induknya. Isu ini timbul kerana penyemak imbas mentafsir trengkas flex: 1 secara berbeza.

Untuk menyelesaikan masalah ini, gantikan flex: 1 dengan flex: 1 1 1px. Nilai terlaras ini secara eksplisit menetapkan asas-flex (lebar atau ketinggian minimum) kepada 1px. Apabila digunakan dalam kombinasi dengan overflow-y: scroll, ia memaksa div anak untuk menghormati had ketinggian ibu bapa dan memaparkan bar skrol apabila perlu.

Berikut ialah pelarasan kod khusus untuk dibuat:

<code class="css">#messagelist {
  flex: 1 1 1px; /* new */
}

#messagecontents {
  flex: 1 1 1px; /* new */
}</code>

Dengan perubahan ini berlaku, div anak akan berkembang untuk mengisi ruang menegak yang tinggal dalam bekas induk, tetapi ia tidak lagi melebihi ketinggian ibu bapa. Bar skrol akan muncul apabila kandungan melimpah, membenarkan pengguna menatal kandungan secara menegak tanpa div kanak-kanak berkembang selama-lamanya.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Item Flex daripada Melebihi Ketinggian Induk dan Mendayakan Bar Skrol dalam Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!