Mengapa `ketinggian: 100%` Tidak Berfungsi seperti yang Dijangkakan dalam Lajur Flexbox dalam Chrome?

Masalah Ketinggian dalam Lajur Flexbox: A Chrome Quirk

Dalam lajur flexbox, anda mungkin menghadapi kesukaran apabila menggunakan peratusan ketinggian untuk saiz elemen kanak-kanak. Isu ini berpunca daripada keanehan dalam pengendalian Chrome terhadap spesifikasi flexbox.

Pertimbangkan contoh berikut:

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

.flexbox {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex {
  background: blue;
  flex: 1;
}

.flex-child {
  background: red;
  height: 100%;
  width: 100%;
  display: block;
}

.static {
  background: green;
  width: 100%;
  height: 5rem;
}

Anda menjangkakan elemen .flex-child merah akan menduduki keseluruhan ketinggian induk .flex birunya. Walau bagaimanapun, ketinggian:100% tidak berfungsi seperti yang dimaksudkan.

Penyelesaian:

Untuk menyelesaikan isu ini:

1. Ubah suai .flex untuk dipaparkan: lentur.
2. Alih keluar ketinggian:100% daripada .flex-child.

Pelarasan ini memastikan .flex-child memenuhi seluruh ruang dalam .flex.

Latar Belakang Teknikal:

Dalam flexbox, align-self:stretch (lalai) menentukan sifat saiz silang (di sini, ketinggian) elemen yang difleksikan. Walau bagaimanapun, peratusan menggunakan nilai saiz silang yang ditentukan, bukan nilai yang digunakan. Dalam kes ini, .flex-child cuba untuk menduduki 100% ketinggian .flex yang ditentukan, iaitu automatik secara lalai. Ini mengelirukan enjin reka letak.

Menetapkan .flex untuk dipaparkan: flex menyelesaikan masalah dengan mengatasi kelakuan lalai dan membenarkan CSS peringkat lebih tinggi untuk menentukan saiz .flex.

Pengecualian:

Penyelesaian ini tidak akan berfungsi jika anda ingin mengisi sebahagian .flex. Untuk mencapai matlamat ini, anda boleh menambah elemen .spacer dalam .flex dengan flex:1 dan tetapkan flex-child kepada flex:9 (dan flex-direction:column pada .flex). Walau bagaimanapun, ini adalah satu penggodaman dan diharapkan kemas kini penyemak imbas akan datang akan menangani keanehan ini.

Atas ialah kandungan terperinci Mengapa `ketinggian: 100%` Tidak Berfungsi seperti yang Dijangkakan dalam Lajur Flexbox dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!