Mengapa item fleksibel tidak menyusut melebihi ukuran konten?

Question

Saya memiliki 4 kolom flexbox dan semuanya berfungsi dengan baik, tetapi ketika saya menambahkan beberapa teks ke kolom dan mengaturnya ke ukuran font yang besar, itu membuat kolom lebih lebar dari yang seharusnya karena properti flex.

Saya mencoba menggunakan word-break: break-worddan itu membantu, tetapi tetap ketika saya mengubah ukuran kolom menjadi lebar yang sangat kecil, huruf dalam teks dipecah menjadi beberapa baris (satu huruf per baris), namun kolom tidak mendapatkan lebar yang lebih kecil dari satu ukuran huruf .

Tonton video ini (di awal, kolom pertama adalah yang terkecil, tetapi ketika saya mengubah ukuran jendela, itu adalah kolom terluas. Saya hanya ingin selalu menghormati pengaturan flex; ukuran flex 1: 3: 4: 4)

Saya tahu, mengatur ukuran font dan bantalan kolom menjadi lebih kecil akan membantu ... tetapi apakah ada solusi lain?

Saya tidak bisa 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

Ukuran Minimum Otomatis Item Fleksibel

Anda menemukan pengaturan default flexbox.

Item fleksibel tidak boleh lebih kecil dari ukuran kontennya di sepanjang sumbu utama.

Standarnya adalah ...

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

... untuk item fleksibel masing-masing dalam arah baris dan kolom.

Anda dapat mengganti default ini dengan mengatur item flex ke:

• min-width: 0
• min-height: 0
• overflow: hidden(atau nilai lainnya, kecuali visible)

---

Spesifikasi Flexbox

4.5. Ukuran Minimum Otomatis Item Flex

Untuk memberikan ukuran minimum default yang lebih masuk akal untuk item fleksibel, spesifikasi ini memperkenalkan autonilai baru sebagai nilai awal min-widthdan min-heightproperti yang ditentukan dalam CSS 2.1.

Berkenaan dengan autonilai ...

Pada item flex yang overflowberada visibledi sumbu utama, ketika ditentukan pada properti ukuran min sumbu utama item flex, menentukan ukuran minimum otomatis . Itu sebaliknya menghitung 0.

Dengan kata lain:

• The min-width: autodan min-height: autodefault hanya berlaku saat overflowini visible.
• Jika overflownilainya bukan visible, nilai properti min-size adalah 0.
• Oleh karena itu, overflow: hiddendapat menjadi pengganti min-width: 0dan min-height: 0.

dan...

• Algoritme ukuran minimum hanya berlaku pada sumbu utama.
• Misalnya, item fleksibel dalam penampung arah baris tidak didapatkan min-height: autosecara default.
• Untuk penjelasan lebih detail lihat posting ini:
  • min-width rendering berbeda dalam flex-direction: row dan flex-direction: column

---

Anda telah menerapkan min-width: 0 dan item masih tidak menyusut?

Kontainer Fleksibel Bersarang

Jika Anda berurusan dengan item fleksibel pada beberapa tingkat struktur HTML, mungkin perlu mengganti item default min-width: auto/ min-height: autopada tingkat yang lebih tinggi.

Pada dasarnya, item flex dengan level yang lebih tinggi min-width: autodapat mencegah penyusutan pada item yang disarangkan di bawah min-width: 0.

Contoh:

• Item fleksibel tidak menyusut lebih kecil dari isinya
• Menyesuaikan anak menjadi orang tua
• Properti white-space css membuat masalah dengan flex

---

Catatan Rendering Browser

• Chrome vs. Firefox / Edge

  Setidaknya sejak 2017, tampaknya Chrome (1) kembali ke min-width: 0/ min-height: 0defaults, atau (2) secara otomatis menerapkan 0default dalam situasi tertentu berdasarkan algoritme misteri. (Ini bisa disebut intervensi .) Akibatnya, banyak orang melihat tata letak mereka (terutama scrollbar yang diinginkan) berfungsi seperti yang diharapkan di Chrome, tetapi tidak di Firefox / Edge. Masalah ini dibahas lebih detail di sini: perbedaan flex-shrink antara Firefox dan Chrome

• IE11

  Seperti disebutkan dalam spesifikasi, autonilai untuk properti min-widthdan min-heightadalah "baru". Ini berarti bahwa beberapa browser mungkin masih merender 0nilai secara default, karena mereka menerapkan tata letak fleksibel sebelum nilai diperbarui dan karena 0merupakan nilai awal untuk min-widthdan min-heightdi CSS 2.1 . Salah satu browser tersebut adalah IE11. Browser lain telah memperbarui ke nilai yang lebih baru autoseperti yang ditentukan dalam spesifikasi flexbox .

---

Demo Revisi

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

jsFiddle

Answer 2

Saya menemukan ini telah menggigit saya berulang kali selama bertahun-tahun untuk flex dan grid, jadi saya akan menyarankan yang berikut:

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

dan kemudian gunakan saja min-width: autoatau min-height: autojika Anda membutuhkan perilaku itu.

Faktanya, tambahkan juga ukuran kotak untuk membuat semua tata letak lebih waras:

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

Adakah yang tahu jika ada konsekuensi yang aneh? Saya tidak menemukan apa pun dalam beberapa tahun menggunakan campuran di atas. Faktanya, saya tidak dapat memikirkan kasus apa pun di mana saya ingin mengatur tata letak dari konten ke luar ke flex / grid, daripada flex / grid ke dalam ke konten --- dan tentunya jika ada, itu jarang terjadi. Jadi ini terasa seperti default yang buruk. Tapi mungkin aku melewatkan sesuatu?