Mengapakah 'height: 100%' tidak berfungsi pada anak lajur flexbox dalam Chrome?

Ketinggian 100% pada anak lajur flexbox tidak berfungsi: Isu Chrome

Dalam flexbox, elemen kanak-kanak dijangka memenuhi ketinggian yang tersedia seperti yang ditentukan oleh ketinggian: 100% harta. Walau bagaimanapun, tingkah laku ini rosak dalam Chrome apabila elemen induk ialah lajur flexbox.

Dalam contoh yang disediakan, kod berikut bertujuan untuk mencipta reka letak lajur flexbox:

.flexbox {
  display: flex;
  flex-direction: column;
  height: 100%;
}

Dan elemen kanak-kanak ditetapkan untuk mengisi ketinggian yang tersedia:

.flex-child {
  height: 100%;
}

Walau bagaimanapun, dalam Chrome, elemen kanak-kanak tidak bertindak balas kepada sifat ketinggian:100%, meninggalkannya dengan ketinggian yang tidak ditentukan.

Penyelesaian:

Isu boleh diselesaikan dengan mengubah suai yang berikut:

1. Tetapkan elemen induk .flex untuk dipaparkan: flex. Ini adalah langkah penting yang secara eksplisit mengarahkan penyemak imbas untuk menggunakan reka letak flexbox.
2. Alih keluar ketinggian: 100% sifat daripada elemen anak .flex-child. Ini menghapuskan kekeliruan yang disebabkan oleh penyemak imbas cuba menggunakan nilai peratusan pada ketinggian induk yang tidak ditentukan.

Penjelasan:

Flexbox mengikut spesifikasi mengikut huruf . Nilai align-self: stretch, yang merupakan lalai untuk elemen lentur, hanya mengubah suai nilai "terpakai" bagi sifat bersaiz silang (dalam kes ini, ketinggian), bukan nilai "ditentukan"nya. Peratusan, sebaliknya, dikira berdasarkan nilai yang ditentukan bagi sifat bersaiz silang induk.

Memandangkan .flex tidak mempunyai ketinggian tertentu, cuba menetapkan ketinggian: 100% pada .flex- kanak-kanak menghasilkan 100% ketinggian .flex yang tidak ditentukan, yang pada asasnya adalah "auto." Ini menyebabkan penyemak imbas tersalah tafsir niat.

Dengan menetapkan .flex untuk dipaparkan: flex, kami memaksa penyemak imbas untuk menggunakan reka letak flexbox, memastikan elemen dibentangkan dengan betul. Selain itu, mengalih keluar ketinggian: 100% sifat pada .flex-child membenarkan elemen mewarisi ketinggian yang ditentukan induknya, .flex.

Penghadan:

Sementara penyelesaian ini berfungsi untuk mengisi seluruh ruang .flex, ia mungkin tidak berfungsi jika hanya sebahagian daripada .flex bertujuan untuk diisi. Dalam kes sedemikian, penyelesaian menggunakan kedudukan mutlak atau berbilang anak kotak flex mungkin diperlukan.

Atas ialah kandungan terperinci Mengapakah 'height: 100%' tidak berfungsi pada anak lajur flexbox dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!