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 gunakanmin-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 daripada 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?

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 anjal untuk arah baris dan lajur masing-masing.

Anda boleh mengatasi lalai ini dengan menetapkan item fleksibel kepada:

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

Spesifikasi Flexbox

Mengenaiautonilai...

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 mendapatmin-height: autosecara lalai.
• Untuk arahan yang lebih terperinci, sila 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 lalaimin-width: auto/min-height: auto code> pada projek peringkat lebih tinggi.

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

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

• Chrome lwn Firefox/Edge

  Sejak sekurang-kurangnya 2017, Chrome nampaknya sama ada (1) kembali kepadamin-width: 0/min-height: 0默认值，或者 ( 2) 基于神秘算法在某些情况下自动应用0lalai. (Ini mungkin yang mereka panggilintervensi.) 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, nilaiautountuk sifatmin-widthdanmin-heightadalah "baharu". Ini bermakna sesetengah penyemak imbas masih boleh memaparkan nilai0secara lalai kerana mereka melaksanakan reka letak Flex sebelum mengemas kini nilai dan0ialahmin Initial valuesCSS 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 kepadayang lebih baharuflexbox auto ditakrifkan dalam spesifikasi.

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

 
Lorem ipsum dolor
 
Lorem ipsum dolor
 
Lorem ipsum dolor
 
Lorem ipsum dolor