Mengapakah `overflow-y` tidak berfungsi dengan flexbox bersarang dalam Firefox?

Firefox overflow-y Tidak Berfungsi dengan Nested Flexbox

Dalam CSS3 flexbox, isu timbul dalam Firefox apabila overflow-y digunakan pada elemen lentur bersarang. Ini menghalang elemen flex daripada menatal secara menegak, seperti yang dilihat dalam CodePen ini: http://codepen.io/anon/pen/NPYVga.

Penjelasan Terperinci:

Secara lalai, item flex menetapkan saiz minimum berdasarkan saiz intrinsik anak mereka. Apabila elemen dengan limpahan: [tersembunyi|scroll|auto] terkandung dalam item fleksibel, item fleksibel secara konsisten menolak untuk mengecil lebih kecil daripada saiz kandungan minimum kanak-kanak.

Penyelesaian:

Untuk menyelesaikan isu ini, tetapkan ketinggian min:0 kepada item flex ancestor (.level-0-row2 dalam kod yang disediakan). Ini melumpuhkan gelagat saiz minimum lalai, membenarkan item flex mengecil mengikut keperluan.

Berikut ialah pen kod yang diperbetulkan dengan pembetulan:

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;
}

Nota:

Chrome tidak menguatkuasakan tingkah laku saiz minimum lalai ini pada masa ini, tetapi mungkin tersalah meruntuhkan saiz min kepada 0 dalam situasi tertentu.

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