Mengapa item flex tidak boleh mengecil di bawah saiz kandungan?

Question

Saya mempunyai 4 lajur Flexbox dan semuanya berfungsi dengan baik, tetapi apabila saya menambahkan beberapa teks pada lajur dan menetapkannya kepada saiz fon yang besar, lajur itu menjadikan lajur lebih lebar daripada yang sepatutnya disebabkan oleh sifat Flex.

Saya cuba menggunakan word-break:break-word dan ia membantu, tetapi apabila saya mengubah saiz lajur kepada lebar yang sangat kecil, huruf dalam teks dibahagikan kepada beberapa baris (satu huruf setiap baris), tetapi lebar lajur tidak pernah menjadi lebih kecil daripada satu Saiz huruf.

Tonton video ini (Pada mulanya, lajur pertama adalah yang paling kecil, tetapi apabila saya mengubah saiz tetingkap, ia adalah lajur terluas. Saya hanya mahu sentiasa menghormati tetapan Flex; Saiz Flex 1:3:4:4)

Saya tahu, menetapkan saiz fon dan pelapik lajur lebih kecil akan membantu...tetapi adakah ada penyelesaian lain?

Saya tidak boleh menggunakan overflow-x:hidden.

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

Answer 1

Saya dapati Flex dan grid telah mengganggu saya selama bertahun-tahun, jadi inilah yang saya cadangkan:

* { min-width: 0; min-height: 0; }

Kemudian jika anda memerlukan tingkah laku ini hanya gunakan min-width: auto 或 min-height: auto .

Malah, anda juga boleh menambah saiz kotak untuk menjadikan semua susun atur lebih logik:

* { box-sizing: border-box; min-width: 0; min-height: 0; }

Adakah sesiapa tahu jika terdapat sebarang akibat yang pelik? Saya tidak mempunyai sebarang masalah dalam beberapa tahun menggunakan gabungan kaedah di atas. Sebenarnya, saya tidak dapat memikirkan sebarang kes di mana saya ingin susun atur daripada kandungan ke luar ke dalam Flex/Grid, dan bukannya susun atur dari Flex/Grid ke dalam kandungan --- sudah tentu jika ia wujud, ia jarang berlaku . Jadi ini terasa seperti lalai yang teruk. Tetapi mungkin saya kehilangan sesuatu?

Answer 2

Saiz minimum automatik untuk projek Flex

Anda menghadapi tetapan lalai Flexbox.

Item fleksibel tidak boleh lebih kecil daripada saiz kandungannya di sepanjang paksi utama.

Nilai lalai ialah...

• 最小宽度：自动
• 最小高度：自动

...item fleksibel untuk arah baris dan lajur masing-masing.

Anda boleh mengatasi lalai ini dengan menetapkan item fleksibel kepada:

• 最小宽度：0
• 最小高度：0
• 溢出：隐藏（或任何其他值，可见Kecuali)

---

Spesifikasi Flexbox

Mengenai autonilai...

Dalam erti kata lain:

Berkenaan apabila
• min-width: auto 和 min-height: auto 默认值仅在overflow 可见.
• Jikaoverflow值不可见，则min-size属性的值为0.
• Oleh itu, overflow: hide 可以替代 min-width: 0 和 min-height: 0.

Juga...

• Algoritma saiz minimum hanya berfungsi pada gelendong.
• Sebagai contoh, item Flex dalam bekas berorientasikan baris tidak mendapat min-height: auto secara lalai.
• Untuk arahan yang lebih terperinci, lihat siaran ini:
  • Lebar minimum arah selekoh: arah baris dan selekoh: lajur dibentangkan secara berbeza

---

Anda telah menggunakan lebar min: 0 tetapi projek masih tidak mengecut?

Bekas Flex Bersarang

Jika anda bekerja dengan projek Flex pada berbilang peringkat struktur HTML, anda mungkin mahu membatalkan lalai min-width: auto / min-height: auto code> pada projek peringkat lebih tinggi.

Pada asasnya, projek Flex tahap lebih tinggi dengan min-width: auto 的更高级别的 Flex 项目可以防止使用 min-width: 0 menghalang projek bersarang di bawah dengan

lebar min: 0 daripada mengecut.

Contoh:

• Barang fleksibel tidak mengecut lebih kecil daripada kandungannya
• Jadikan anak sesuai dengan ibu bapa
• Sifat CSS kosong boleh menyebabkan masalah dengan Flex

---

Arahan pemaparan penyemak imbas

• Chrome lwn Firefox / Edge

  🎜

  Sejak sekurang-kurangnya 2017, Chrome nampaknya sama ada (1) kembali kepada min-width: 0 / min-height: 0 默认值，或者 ( 2) 基于神秘算法在某些情况下自动应用 0 lalai. (Ini mungkin yang mereka panggil intervensi.) Akibatnya, ramai orang melihat reka letak mereka (terutamanya bar skrol yang diperlukan) berfungsi seperti yang diharapkan dalam Chrome, tetapi tidak dalam Firefox/Edge. Isu ini dibincangkan dengan lebih terperinci di sini: perbezaan flex-shrink antara Firefox dan Chrome

• IE11

  Seperti yang dinyatakan dalam spesifikasi, nilai auto untuk sifat min-width dan min-height adalah "baharu". Ini bermakna sesetengah penyemak imbas masih boleh memaparkan nilai 0 secara lalai kerana mereka melaksanakan reka letak Flex sebelum mengemas kini nilai dan 0 ialah min Initial values ​​​​ CSS 2.1min-width 和 min-height 属性的 auto 值为“新”。这意味着某些浏览器默认情况下仍可能呈现 0 值，因为它们在更新该值之前实现了 Flex 布局，并且 0 是 min 的初始值CSS 2.1。 IE11 就是这样的浏览器。 其他浏览器已更新到较新的 flexbox 规范中定义的 auto. IE11 ialah penyemak imbas sedemikian.

  Penyemak imbas lain telah dikemas kini kepada yang lebih baharu flexbox auto ditakrifkan dalam spesifikasi .

---

Demo yang diubah suai

🎜

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>