Mengapa item lentur tidak boleh mengecil kepada kurang daripada saiz kandungan?

Question

Saya mempunyai 4 lajur flexbox dan semuanya berfungsi dengan baik, tetapi apabila saya menambah beberapa teks pada satu lajur dan menetapkannya kepada saiz fon yang besar, ia 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 dipecahkan kepada beberapa baris (satu huruf setiap baris), tetapi lebar lajur tidak akan lebih kecil daripada saiz huruf.

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

Saya tahu bahawa menetapkan saiz fon dan padding lajur kepada nilai yang lebih kecil akan membantu... tetapi adakah terdapat sebarang penyelesaian lain?

Saya tidak boleh menggunakan overflow-x: hidden.

JSFiddle

.container {
  paparan: flex;
  lebar: 100%
}
.col {
  ketinggian min: 200px;
  padding: 30px;
  putus-kata: putus-kata
}
.col1 {
  lentur: 1;
  latar belakang: oren;
  saiz fon: 80px
}
.col2 {
  lentur: 3;
  latar belakang: kuning
}
.col3 {
  lentur: 4;
  latar belakang: biru langit
}
.col4 {
  lentur: 4;
  latar belakang: merah
}

<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 mendapati ini telah menyebabkan saya mengalami masalah berkali-kali sejak beberapa tahun lalu untuk kedua-dua flex dan grid, jadi saya mencadangkan perkara berikut:

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

Jika anda memerlukan tingkah laku ini, gunakan sahaja min-width: auto或min-height: auto.

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

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

Adakah sesiapa tahu jika terdapat sebarang akibat yang pelik? Dalam beberapa tahun menggunakan kaedah di atas, saya tidak mengalami sebarang masalah. Malah, saya tidak dapat memikirkan sebarang situasi di mana saya ingin susun atur daripada kandungan ke luar ke dalam flex/grid, dan bukannya dari flex/grid ke dalam ke kandungan --- dan jika situasi sedemikian wujud, ia sudah tentu 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 pada paksi utama.

Tetapan lalai ialah...

• min-width: auto
• min-height: auto

... Berkenaan untuk melenturkan item dalam arah baris dan lajur masing-masing.

Anda boleh menetapkan item flex kepada:

• min-width: 0
• min-height: 0
• overflow: hidden（或任何其他值，除了visible)

---

Spesifikasi Flexbox

Mengenai autonilai...

Dalam erti kata lain:

• min-width: auto和min-height: auto默认仅在overflow为visible dan
hanya terpakai secara lalai apabila limpahan kelihatan.
• overflow的值不是visible，则min-size属性的值为0Jika
.
• overflow: hidden可以替代min-width: 0和min-height: 0Oleh itu, overflow: hidden boleh menggantikan
dan

.

dan...
• Algoritma saiz minimum hanya berfungsi pada gelendong. min-height: auto
Sebagai contoh, item fleksibel dalam bekas berorientasikan baris tidak mendapat
• secara lalai.
  • Untuk penjelasan yang lebih terperinci, lihat siaran ini:
  lebar min ditunjukkan secara berbeza dalam arah lentur: baris dan arah lentur: lajur

---

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

Bekas Flex Bersarang

min-width: auto / min-height: auto

Jika anda bekerja dengan item flex pada berbilang peringkat struktur HTML anda, anda mungkin mahu mengatasi

/min-width: auto的较高级别flex项目可以阻止下方嵌套的具有min-width: 0 lalai pada item peringkat lebih tinggi.

Pada asasnya, item flex tahap yang lebih tinggi dengan

menghalang item bersarang di bawah dengan

daripada mengecut.
• Contoh:
• Barang fleksibel tidak boleh dikecilkan lebih kecil daripada kandungannya
• Suaikan elemen anak kepada elemen ibu bapa

---

sifat CSS ruang putih bercanggah dengan reka letak fleksibel

• Pertimbangan pemaparan penyemak imbas

  min-width: 0 / min-height: 0的默认值，要么（2）根据某个神秘的算法在某些情况下自动应用0Chrome lwn. Firefox/Edge Sejak 2017, Chrome nampaknya sama ada (1) kembali kepada nilai lalai / atau (2) secara automatik menggunakan nilai lalai 0 dalam situasi tertentu berdasarkan beberapa algoritma misteri. (Ini mungkin apa yang mereka panggil

  intervensi🎜🎜.) Akibatnya, ramai orang melihat reka letak mereka (terutamanya bar skrol yang diingini) berfungsi seperti yang diharapkan dalam Chrome, tetapi tidak dalam Firefox/Edge. Untuk maklumat lebih terperinci, lihat di sini: 🎜perbezaan flex-mengecut antara Firefox dan Chrome🎜🎜

• IE11

  Seperti yang dinyatakan dalam spesifikasi, nilai min-width和min-height属性的auto值是“新的”。这意味着某些浏览器可能仍然默认呈现0值，因为它们在值更新之前实现了flex布局，并且因为0是CSS 2.1中min-width和min-height的初始值。IE11是其中之一。其他浏览器已经更新到了在flexbox规范中定义的较新的auto.

---

Demo yang disemak semula

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