Mengapakah `overflow-wrap: break-word` tidak berfungsi seperti yang diharapkan apabila digunakan dalam bekas flexbox?

Flexbox Mempengaruhi Gelagat Limpahan-Balut

Soalan:

Dalam kod berikut, mengapa sifat limpahan-balutan tidak berkelakuan seperti yang diharapkan apabila digabungkan dengan paparan: lentur?

.wrap {
  overflow-wrap: break-word;
}

<div class="wrap">
  <div class="a">first div</div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div>

Jawapan:

Apabila anda menambah paparan: lentur pada elemen bungkus, ia menjadi bekas kotak flex . Secara lalai, elemen di dalam bekas flexbox dijajarkan dalam satu baris. Walau bagaimanapun, sifat lebar min bagi elemen anak flexbox ditetapkan kepada automatik secara lalai, menyebabkan mereka menduduki lebar minimum yang diperlukan untuk menyimpan kandungannya.

Dalam kod yang disediakan, ini bermakna elemen a dan b ialah diregangkan untuk menampung kandungan mereka. Memandangkan elemen b mempunyai kandungan teks yang sangat panjang, ia memaksa bar skrol mendatar untuk muncul.

Untuk menyelesaikan isu ini, anda boleh menetapkan lebar min bagi elemen b kepada 0. Ini akan membolehkan ia mengecut untuk dimuatkan kandungannya dan hapuskan bar skrol mendatar.

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0;
}

<div class="wrap">
  <div class="a">first div</div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div>

Atas ialah kandungan terperinci Mengapakah `overflow-wrap: break-word` tidak berfungsi seperti yang diharapkan apabila digunakan dalam bekas flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!