flex-wrap: ширина nowrap не включает детей

Question

Разве флексбокс с flex-wrap: nowrap не должен быть шириной его детей?

По какой-то причине это только ширина его родителя. Можно ли заставить его получить ширину своих детей?

В этой кодовой ручке вы можете видеть, что фон не расширяет всю ширину всех дочерних элементов.

.flex {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightblue;
}

.flex div {
  flex-basis: 75%;
  flex-shrink: 0;
}

<div class="flex">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

Редактировать: Я использовал "следует" в предположении, что типичный div с white-space: nowrap, применяемым к встроенным детям, будет расти для размещения своих детей; однако это также не соответствует действительности (https://codepen.io/robgordon/pen/gEvjpL).

Answer 1

Ваш элемент является блочным элементом, что означает, что его ширина составляет 100% от ширины содержащего его блока, и в данном случае это элемент body.

Добавьте границу к элементу body, чтобы лучше видеть:

.flex {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightblue;
}

.flex div {
  flex-basis: 75%;
  flex-shrink: 0;
}

body {
  border:2px solid green;
}

<div class="flex">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

То же самое относится и к элементу body, если вы добавляете рамку в html, поскольку этот элемент также является блочным элементом:

.flex {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightblue;
}

.flex div {
  flex-basis: 75%;
  flex-shrink: 0;
}

body {
  border:2px solid green;
}
html {
  border:2px solid red;
}

<div class="flex">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

Так что все ваши элементы ограничены размером вашего экрана. Из спецификации у нас есть это правило:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

Так как у нас нет отступов / полей / границ, у нас будет width = width of containing block.

Эта логика применяется ко всем нашим элементам, пока мы не достигнем области просмотра:

Содержащий блок, в котором живет корневой элемент , представляет собой прямоугольник, называемый начальным содержащим блоком. Для непрерывных носителей он имеет размеры области просмотра и привязан к началу координат холста; это область страницы для постраничных носителей. Свойство 'direction' исходного содержащего блока такое же, как и для корневого элемента.

---

Кроме того, в вашем случае нет способа сдержать все элементы просто потому, что вы определяете ширину ваших элементов, используя percetange, который будет (во всех случаях) больше, чем родительский. У вас есть 4*75%, который всегда больше, чем 100%.

Так что, что бы вы ни делали, у вас всегда будет переполнение:

.flex {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightblue;
}

.flex div {
  flex-basis: 75%;
  flex-shrink: 0;
}

body {
  border:2px solid green;
}

<div class="flex" style="display:inline-flex">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

<div class="flex" style="width:50%;">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

<div class="flex" style="width:500%;">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

<div class="flex" style="width:200px;">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

Но в случае, если ширина определяется, например, с использованием пикселя (давайте рассмотрим 500px), тогда родительский элемент может содержать дочерний элемент с настройкой inline-flex.

.flex {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightblue;
}

.flex div {
  width: 500px;
  flex-shrink: 0;
}

body {
  border:2px solid green;
}

<div class="flex" style="display:inline-flex">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

<div class="flex" >
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

В этом случае ширина составляет сжимаемая подгонка ширина, описанная ниже:

Расчет ширины усадки до размера аналогичен вычислению ширины ячейки таблицы с использованием алгоритма автоматического размещения таблиц. Грубо говоря: рассчитайте предпочтительную ширину, отформатировав содержимое без разрывов строк, кроме случаев, когда происходят явные разрывы строк, а также рассчитайте предпочтительную минимальную ширину, например, попробовав все возможные разрывы строк. CSS 2.1 не определяет точный алгоритм. В-третьих, найдите доступную ширину: в этом случае это ширина содержащего блока минус используемые значения 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right' и ширина любых соответствующих полос прокрутки.

Тогда ширина усадки: min(max(preferred minimum width, available width), preferred width).

---

Обратите внимание, что использование flex-basis со значением пикселя не даст тот же результат, что и width

.flex {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightblue;
}

.flex div {
  flex-basis: 500px;
  flex-shrink: 0;
}

body {
  border:2px solid green;
}

<div class="flex" style="display:inline-flex">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

<div class="flex" >
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

Подробнее здесь: https://stackoverflow.com/a/34355447/8620333

^{nowrap - значение по умолчанию flex-wrap, поэтому его можно опустить в следующих примерах}