Mengapakah `overflow-y` Firefox tidak konsisten dengan Nested Flexbox?

Limpahan Tidak Konsisten Firefox pada Nested Flexbox

Apabila membuat reka letak yang rumit dengan CSS3, sifat limpahan-y boleh menjadi penting untuk menatal kandungan dalam bahagian tertentu. Walau bagaimanapun, pengguna mungkin menghadapi masalah dengan sifat ini dalam Firefox apabila elemen flexbox bersarang terlibat. Ini boleh mengakibatkan kelakuan menatal yang tidak diingini atau ketiadaan bar skrol yang betul.

Untuk menyelesaikan isu ini, adalah penting untuk memahami gelagat lalai item flexbox dan saiz minimumnya. Item fleksibel biasanya menetapkan saiz minimum lalai berdasarkan saiz intrinsik anak langsung mereka. Tingkah laku ini kekal sama untuk limpahan tersembunyi.

Oleh itu, apabila elemen dengan limpahan: [hidden|scroll|auto] berada dalam item fleksibel, item lentur nenek moyangnya mesti ditetapkan sama ada lebar min:0 ( untuk bekas lentur mendatar) atau ketinggian min:0 (untuk bekas lentur menegak). Ini dengan berkesan melumpuhkan gelagat saiz minimum automatik dan membenarkan item flex mengecil melebihi saiz kandungan minimum anaknya.

Dengan melaksanakan pelarasan ini dalam peraturan .level-0-row2, anda boleh membetulkan gelagat limpahan-y dalam Firefox dan memastikan fungsi tatal yang betul. Ingat, ini hanya terpakai pada Firefox dan diperlukan kerana penyemak imbas lain seperti Chrome (pada mulanya) mengabaikan tingkah laku saiz minimum ini.

Berikut ialah coretan kod yang diperbetulkan dengan pelarasan min-height:0:

<code class="css">.level-0-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  min-height: 0;
}</code>

Atas ialah kandungan terperinci Mengapakah `overflow-y` Firefox tidak konsisten dengan Nested Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!