Mengapa item fleksibel tidak menyusutkan ukuran konten sebelumnya?

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 daripada seharusnya karena properti flex.

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

Tonton video ini (pada awalnya, kolom pertama adalah yang terkecil, tetapi ketika saya mengubah ukuran jendela, itu adalah kolom terluas. Saya hanya ingin menghormati pengaturan flex selalu; 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>

Ukuran Minimum Otomatis dari Item Flex

Anda menemui 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 fleksibel ke:

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

Spesifikasi Flexbox

4.5. Otomatis Ukuran Minimum Item Flex

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

Berkenaan dengan autonilai ...

Pada item fleksibel yang overflowada visibledi sumbu utama, ketika ditentukan pada properti min-size sumbu utama item flex, menentukan ukuran minimum otomatis . Kalau tidak dihitung untuk 0.

Dengan kata lain:

• Standar min-width: autodan min-height: autohanya berlaku bila overflowada visible.
• Jika overflownilainya tidak visible, nilai properti min-size adalah 0.
• Karenanya, overflow: hiddenbisa menjadi pengganti min-width: 0dan min-height: 0.

dan...

• Algoritma ukuran minimum hanya berlaku pada sumbu utama.
• Misalnya, item fleksibel dalam wadah arah-baris tidak didapat min-height: autosecara default.
• Untuk penjelasan lebih rinci lihat posting ini:
  • render lebar minimum secara berbeda dalam arah fleksibel: baris dan arah fleksibel: kolom

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

Wadah Flex Bersarang

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

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

Contoh:

• Item fleksibel tidak menyusut lebih kecil dari kontennya
• Menempatkan anak menjadi orang tua
• properti css white-space menciptakan masalah dengan flex

Catatan Rendering Browser

• Chrome vs. Firefox / Edge

  Sejak setidaknya 2017, tampaknya Chrome adalah (1) kembali ke min-width: 0/ min-height: 0default, atau (2) secara otomatis menerapkan 0default dalam situasi tertentu berdasarkan pada algoritma misteri. (Ini bisa disebut intervensi .) Akibatnya, banyak orang melihat tata letak mereka (terutama bilah gulir yang diinginkan) berfungsi seperti yang diharapkan di Chrome, tetapi tidak di Firefox / Edge. Masalah ini dibahas secara lebih rinci di sini: ketidaksesuaian flex-shrink antara Firefox dan Chrome

• IE11

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

Demo yang Direvisi

.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