Mengapa Overflow-Y Tidak Berfungsi Seperti Yang Dijangkakan dalam Firefox dengan Elemen Nested Flexbox?

Isu Flexbox Overflow-Y dengan Elemen Bersarang dalam Firefox

Dalam reka letak CSS menggunakan flexbox, di mana elemen bersarang terkandung dalam flexbox induk item, limpahan-y mungkin tidak berfungsi seperti yang diharapkan dalam Firefox. Isu ini timbul khususnya apabila elemen bersarang diberikan sifat limpahan-y auto.

Penjelasan Masalah:

Item Flexbox secara automatik mengira saiz minimumnya berdasarkan intrinsik saiz elemen anak mereka. Walau bagaimanapun, apabila terdapat elemen anak dengan sifat limpahan digunakan, seperti limpahan-y, item flex akan mengekalkan saiz minimum yang setara dengan kandungan kanak-kanak, walaupun ia melebihi ruang yang tersedia.

Penyelesaian :

Untuk menyelesaikan isu ini dalam Firefox, adalah perlu untuk menetapkan secara eksplisit sifat ketinggian min item flex induk kepada 0. Ini melumpuhkan tingkah laku saiz minimum lalai dan membenarkan item flex mengecil di bawah saiz kandungan min kanak-kanak.

<code class="css">.parent-flex-item {
  min-height: 0;
}</code>

Dengan menggunakan pembetulan ini, elemen bersarang dengan overflow-y: auto kini akan dapat mengecil dan memaparkan bar skrol apabila kandungannya melebihi ketinggian yang tersedia.

Contoh Kod:

Pertimbangkan kod HTML dan CSS berikut:

<code class="html"><div class="parent-flex-item">
  <div class="nested-element">
    <p>This is a long text that exceeds the available height.</p>
  </div>
</div></code>

<code class="css">.parent-flex-item {
  display: flex;
  flex-direction: column;
  height: 100px;
  min-height: 0;
}

.nested-element {
  overflow-y: auto;
}</code>

Dengan kod ini, elemen bersarang akan mempunyai bar skrol dalam Firefox, membenarkan pengguna melihat kandungan yang melimpah.

Atas ialah kandungan terperinci Mengapa Overflow-Y Tidak Berfungsi Seperti Yang Dijangkakan dalam Firefox dengan Elemen Nested Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!