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

314

У меня есть 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>

tomas657
источник

Ответы:

543

Автоматический минимальный размер элементов 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-width: 0, а элемент все еще не сжимается?

Вложенные гибкие контейнеры

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

По сути, высокоуровневый изгибаемый элемент с 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 .


Пересмотренный Демо

jsFiddle

Майкл Бенджамин
источник
2
У меня был родительский тег <fieldset> намного выше в DOM, который вызвал ту же проблему. Установка его минимальной ширины на 0 исправила это.
Ян Сварт
1
Любые мысли об этом: stackoverflow.com/a/36247448/8620333 .. Я обнаружил, что это связано с, min-widthно не совсем уверен во всех деталях.
Темани Афиф
3
Похоже, что Chrome изменил поведение в v73, чтобы не сжиматься меньше, чем содержимое.
maccam94
2
То же самое исправление работало с min-height: 0;. Мне пришлось попробовать установить это для нескольких более высоких элементов в дереве.
Бен Уилер
Я должен был установить min-height: 0;в ike 10 мест, чтобы заставить его работать. Спасибо, спасибо, большое спасибо за отличный совет!
dave0688