Чому гнучкі елементи не зменшуються минулого розміру вмісту?

У мене є 4 колонки flexbox, і все працює добре, але коли я додаю текст до стовпця і встановлюю його на великий розмір шрифту, він робить колонку ширшою, ніж повинна бути, завдяки властивості flex.

Я намагався використовувати, word-break: break-wordі це допомогло, але все ж, коли я змінюю розмір стовпця до дуже малої ширини, букви в тексті розбиваються на кілька рядків (одна літера на рядок), і все ж стовпчик не набуває меншої ширини, ніж розмір однієї літери .

Подивіться це відео (на початку, перший стовпчик найменший, але коли я змінив розмір вікна, це найширший стовпчик. Я просто хочу завжди дотримуватися налаштувань гнучкості; розміри гнучких 1: 3: 4: 4)

Я знаю, встановлення розміру шрифту та набивання стовпців на менші допоможе ... але чи є якесь інше рішення?

Я не можу користуватися 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>

Автоматичний мінімальний розмір елементів Flex

Ви зіткнулися з налаштуваннями за замовчуванням у флексі.

Гнучка деталь не може бути меншою за розмір її вмісту вздовж головної осі.

За замовчуванням ...

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

... для гнучких елементів у напрямку рядка та стовпчика відповідно.

Ви можете змінити ці параметри за замовчуванням, встановивши гнучкі елементи на:

• min-width: 0
• min-height: 0
• overflow: hidden(або будь-яке інше значення, крім visible)

Специфікація Flexbox

4.5. Автоматичний мінімальний розмір елементів Flex

Щоб забезпечити більш розумний мінімальний розмір за замовчуванням для гнучких елементів, ця специфікація вводить нове autoзначення як початкове значення min-widthта min-heightвластивості, визначене в CSS 2.1.

Що стосується autoвартості ...

На елементі гнучкості, overflowякий visibleзнаходиться на головній осі, якщо зазначено у властивості мінімального розміру основної осі гнучких елементів, вказується автоматичний мінімальний розмір . Інакше він обчислюється 0.

Іншими словами:

• min-width: autoІ по min-height: autoзамовчуванням застосовується тільки тоді , коли overflowє visible.
• Якщо overflowзначення немає visible, значенням властивості min-size є 0.
• Отже, overflow: hiddenможе бути заміною min-width: 0і min-height: 0.

і ...

• Алгоритм мінімального розміру застосовується лише на головній осі.
• Наприклад, елемент flex у контейнері з напрямком рядка min-height: autoза замовчуванням не потрапляє .
• Більш детальне пояснення дивіться у цій публікації:
  • мінімальна ширина візуалізації по-різному у напрямку згинання: рядок та згинання: стовпець

Ви застосували міні-ширину: 0, а елемент все ще не зменшується?

Вкладені контейнери Flex

Якщо ви маєте справу з гнучкими елементами на декількох рівнях структури HTML, можливо, буде потрібно змінити елементи за замовчуванням min-width: auto/ min-height: autoна елементах на більш високих рівнях.

В основному, вищий елемент з гнучким рівнем min-width: autoможе запобігти зменшенню елементів, які вкладені нижче min-width: 0.

Приклади:

• Елемент Flex не зменшується менше, ніж його вміст
• Встановлення дитини в батьків
• властивість css white-space створює проблеми з flex

Примітки щодо візуалізації браузера

• Chrome проти Firefox / Edge

  Починаючи з принаймні 2017 року, схоже, що Chrome або (1) повертається назад до min-width: 0/ min-height: 0за замовчуванням, або (2) автоматично застосовує параметри 0за замовчуванням у певних ситуаціях на основі алгоритму таємниці. (Це може бути те, що вони називають втручанням .) В результаті багато людей бачать, як їх макет (особливо бажані смуги прокрутки) працює так, як очікувалося в Chrome, але не в Firefox / Edge. Цей випуск розглянуто більш докладно тут: нестабільна різниця між Firefox та Chrome

• IE11

  Як зазначено в специфікації, autoзначення для властивостей min-widthі min-heightвластивостей "нове". Це означає, що деякі браузери все ще можуть надати 0значення за замовчуванням, оскільки вони реалізували розкладку перед тим, як значення було оновлено, і тому, що 0є початковим значенням для min-widthта min-heightу CSS 2.1 . Один з таких браузерів - IE11. Інші веб-переглядачі оновлювались до нового autoзначення, визначеного в специфікації flexbox .

Переглянута демонстрація

.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