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

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

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

Посмотрите это видео (в начале первый столбец самый маленький, но когда я изменил размеры окна, это самый широкий столбец. Я просто хочу всегда соблюдать параметры flex; размеры flex 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

Вы сталкиваетесь с настройкой по умолчанию 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на главной оси, если он указан в свойстве минимального размера главной оси гибкого элемента, задается автоматический минимальный размер . В противном случае он рассчитывает на 0.

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

• min-width: autoИ по min-height: autoумолчанию применяется только тогда , когда overflowесть visible.
• Если 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 на нескольких уровнях структуры HTML, может потребоваться переопределить элементы по умолчанию min-width: auto/ min-height: autoon на более высоких уровнях.

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

Примеры:

• Элемент Flex не сжимается меньше, чем его содержимое
• Приспособление ребенка к родителю
• Свойство white-space css создает проблемы с 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