it-swarm.com.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры:


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

  • Chrome против Firefox/Edge

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

  • IE11

    Как отмечено в спецификации, значение auto для свойств min-width и min-height является "новым". Это означает, что некоторые браузеры могут по-прежнему отображать значение 0 по умолчанию, поскольку они реализовали гибкую компоновку до обновления значения и поскольку 0 является начальным значением для min-width и min-height в CSS 2.1 . Одним из таких браузеров является IE11. Другие браузеры обновили новое значение auto, как определено в flexbox spec .


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

.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

345
Michael_B