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

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

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

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

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

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

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

css lang-css prettyprint-override">.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
}
html lang-html prettyprint-override"><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>
132
css css3 flexbox html

1 ответов

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

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

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

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

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

...для элементов Flex в строке-направление и колонка-направление, соответственно.

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

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

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

примеры:

Отображения В Браузере Примечания

  • Chrome против Firefox / Edge

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

  • IE11

    как отмечено в спецификации,auto значение min-width и min-height "свойства" - "новый". Это означает, что некоторые браузеры все еще могут отображать 0 значение по умолчанию, потому что они реализовали макет flex до обновления значения и потому что 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

220