Bagaimana untuk Mencegah Kanak-kanak Flex daripada Melebihi Ketinggian Ibu Bapa dengan Bar Skrol dalam Firefox?

Elakkan Item Flex daripada Melebihi Ketinggian Induk dengan Bar Skrol

Isu: Dalam Firefox, item anak fleksibel dengan bar skrol melebihi ketinggian bekas fleksibel induknya, menyebabkan limpahan kandungan dan ketiadaan bar skrol.

Penyelesaian:

Ubah suai sifat fleksibel item anak #messagelist dan # kandungan mesej seperti berikut:

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

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

Penjelasan:

Gelagat lalai Chrome adalah untuk mencetus limpahan dan menjana bar skrol apabila asas-flex ditetapkan kepada 0. Firefox dan Edge , walau bagaimanapun, memerlukan set ketinggian atau ketinggian maksimum untuk limpahan berlaku.

Dengan menentukan ketinggian tetap 1px untuk asas-flex, walaupun nilainya kecil, ia memenuhi keperluan untuk mencipta limpahan keadaan dan membolehkan bar skrol muncul apabila kandungan melebihi ketinggian kanak-kanak.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Kanak-kanak Flex daripada Melebihi Ketinggian Ibu Bapa dengan Bar Skrol dalam Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!