Почему бы не сгибать предметы,уменьшая размер содержимого в прошлом.

html css flexbox


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




Answer 1 Michael Benjamin


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

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

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

По умолчанию...

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

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

Вы можете отменить эти значения по умолчанию,установив для них значение гибких элементов:

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

Спецификация флексбокса

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 .

and...


Вы применили минимальную ширину:0 и предмет все еще не сжимается?

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

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

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

Examples:


Примечания к браузеру

  • 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