Mengapa overflow-y tidak berfungsi seperti yang diharapkan dalam Firefox dengan susun atur flexbox bersarang?

Isu Firefox Overflow-Y dengan Susun Letak Flexbox Bersarang

Dalam susun atur lebar 100% dan ketinggian 100% direka dengan flexbox bersarang, satu reka letak yang tidak dijangka tingkah laku ditemui dalam Firefox di mana limpahan-y tidak berfungsi dengan betul.

Soalan:

Mengapa limpahan-y tidak berfungsi seperti yang diharapkan dengan kod CSS yang disediakan, menyebabkan Firefox untuk menunjukkan bar skrol yang salah?

Jawapan:

Isu ini timbul disebabkan oleh tingkah laku saiz minimum lalai bagi item fleksibel. Item fleksibel memperoleh saiz minimumnya berdasarkan saiz sedia ada anak mereka, tanpa menghiraukan limpahan-y yang digunakan pada keturunan mereka.

Apabila elemen dengan limpahan-y: [tersembunyi|tatal|auto] diletakkan dalam item fleksibel, adalah perlu untuk menetapkan lebar min:0 (untuk bekas fleksibel mendatar) atau ketinggian min:0 (untuk bekas fleksibel menegak) pada item lentur nenek moyang yang sepadan. Ini akan melumpuhkan gelagat saiz minimum lalai, membenarkan item fleksibel mengecil di bawah saiz kandungan min kanak-kanak.

Untuk menyelesaikan isu, tambah ketinggian min:0 pada peraturan .level-0-row2, seperti yang ditunjukkan dalam kod CSS yang dikemas kini berikut:

<code class="css">.level-0-row2 {
  ...
  min-height: 0;
  flex: 1;
  border: 1px solid black;
  ...
}</code>

Ini memastikan item flex .level-0-row2 mempertimbangkan limpahan-y anak-anaknya dan membolehkannya mengecil di bawah saiz kandungan minimum, dengan itu membolehkan yang betul gelagat limpahan dalam Firefox.

Atas ialah kandungan terperinci Mengapa overflow-y tidak berfungsi seperti yang diharapkan dalam Firefox dengan susun atur flexbox bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!