Как не допустить переполнения flex-элементов родителем flex без переноса?

Question

У меня есть flexbox с flex-direction: row. Дочерние элементы имеют набор min-width. Когда окно сокращается до точки, где достигается min-width, элементы начинают переполнять гибкий контейнер.

.parent {
  display: flex;
  flex-direction: row;
  background-color: red;
}

.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;
  margin: 5px;
  height: 100px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

https://jsfiddle.net/4t8029q8/

Есть ли способ заставить контейнер растягиваться, чтобы содержать элементы, не устанавливая явное значение min-width для родителя? Это обеспечивает поведение, которого я пытаюсь достичь, но оно слишком жесткое, чтобы вместить переменное количество предметов.

.parent {
  display: flex;
  flex-direction: row;
  background-color: red;
  min-width: 330px
}

.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;
  margin: 5px;
  height: 100px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

https://jsfiddle.net/4t8029q8/1/

Это то, что я хочу, чтобы flex-элементы никогда не переполняли flex-контейнер, даже если это вызывает необходимость горизонтальной прокрутки страницы.

ПРИМЕЧАНИЕ: у меня есть другая более сложная логика, требующая flex-basis: 0px и flex-grow: 1, поэтому эти строки не могут быть удалены.

Answer 1

Вы просите, чтобы контейнер изменял размеры плавно, чтобы предотвратить переполнение дочерних элементов. Это динамическое поведение, являющееся областью JavaScript, а не HTML или CSS.

Поскольку механизмы рендеринга HTML и CSS автоматически не перенаправляют исходные документы, когда дочерние элементы переполняют свой контейнер, у контейнера нет возможности узнать, когда дочерние элементы переполнились и, следовательно, расширяться. Вы находитесь в статичной среде. Концепция относится и к упаковке.

Вот более подробное объяснение (которое охватывает поведение обтекания, но также относится и к переполнению):

• Создание контейнера для усадки дочерних элементов при их переносе

Вам понадобится скрипт или, возможно, медиа-запросы, чтобы ваш макет работал так, как вам нужно.

Answer 2

Вы заставляете свои дочерние элементы иметь определенную ширину, во многом как упомянуто @Michael_B, это по существу создает статическую среду, где они останутся установленной ширины независимо от родителя.

По сути, на данный момент, поскольку вы знаете минимальную ширину ваших дочерних элементов, я бы создал медиазапрос с определенным требованием к ширине, которое в данном случае составляет 100 пикселей. Как только ваш экран достигнет указанного размера, заставьте вашего родителя иметь обертывающие элементы, добавив flex-wrap: wrap; к вашему родителю. Когда вы выйдете за пределы указанной ширины, обязательно верните CSS своего родителя обратно, чтобы не допустить переноса, flex-wrap: nowrap;. Это позволит обернуть ваши дочерние элементы, а ваш родитель создаст горизонталь к странице.

Answer 3

Установите display: inline-flex в классе .parent, чтобы изменить его на встроенный элемент. Это также заставит .parent расширяться, чтобы содержать его потомков. Затем, установив min-width: 100% в классе .parent, он заставит его расширяться до 100% содержащего элемента.

.parent {
  display: inline-flex;
  flex-direction: row;
  background-color: red;
  min-width: 100%;
}
.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;

  margin: 5px;
  height: 100px;
  background-color: blue;
}

Answer 4

вы можете использовать overflow-y: auto для контейнера parent, если прокрутка не имеет значения для вас.

.parent {
  display: flex;
  flex-direction: row;
  overflow-y: auto;/*add this.*/
  background-color: red;
}

.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;
  margin: 5px;
  height: 100px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>