Почему гибкие элементы не уменьшаются до размера контента?

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

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

Посмотрите это видео: http://screencast-o-matic.com/watch/cDetln1tyT (в начале первый столбец самый маленький, но когда я изменил размер окна, это самый широкий столбец. Я просто хочу уважать flex настройки всегда; гибкие размеры 1: 3: 4: 4)

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

Я не могу использовать overflow-x: hidden.

JSFiddle: https://jsfiddle.net/78h8wv4o/3/

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

Ответ 1

Автоматический минимальный размер элементов Flex

Вы сталкиваетесь с настройкой по умолчанию для flexbox.

Сгибаемый элемент не может быть меньше размера его содержимого вдоль главной оси.

Значения по умолчанию...

min-width: auto
min-height: auto

... для гибких элементов в направлении строк и столбцов соответственно.

Вы можете переопределить эти значения по умолчанию, установив flex-элементы в:

min-width: 0
min-height: 0
overflow: hidden (или любое другое значение, кроме visible)

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

4,5. Автоматический минимальный размер элементов Flex

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

Что касается значения auto...

Для гибкого элемента, overflow которого visible на главной оси, при указании в свойстве min-size главной оси гибких элементов указывается автоматический минимальный размер. В противном случае вычисляется до 0.

Другими словами:

min-width: auto и min-height: auto значения по умолчанию применяются только тогда, когда visible overflow.
Если значение overflow не visible, значение свойства min-size равно 0.
Следовательно, overflow: hidden может заменить min-width: 0 и min-height: 0.

а также...

Алгоритм минимального размера применяется только на главной оси.
Например, гибкий элемент в контейнере в направлении строки не получает min-height: auto по умолчанию.
Для более подробного объяснения смотрите этот пост:
- минимальная ширина рендеринга по-разному в flex-direction: row и flex-direction: column

Вы применили min-width: 0, а элемент все еще не сжимается?

Вложенные контейнеры Flex

Если вы имеете дело с элементами flex на нескольких уровнях структуры HTML, может потребоваться переопределить стандартную min-width: auto/min-height: auto для элементов на более высоких уровнях.

В основном, гибкий элемент более высокого уровня с min-width: auto может предотвратить сжатие элементов, вложенных ниже с min-width: 0.

Примеры:

Браузер Рендеринг Заметок

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>