Flex-wrap: ширина теперь не включает дочерние элементы

Ваш элемент является блочным элементом, что означает, что его ширина составляет 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.

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

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element.

Кроме того, в вашем случае нет возможности содержать все элементы просто потому, что вы определяете ширину своих элементов, используя процент, который (во всех случаях) будет больше, чем родитель. У вас есть 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>

Но если ширина определяется, например, с помощью пикселя (давайте рассмотрим 500 пикселей), то родительский элемент может содержать дочерний элемент с настройкой 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>

В этом случае ширина представляет собой ширину Уменьшать до размеров, описанную ниже:

Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.

Then the shrink-to-fit width is: 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 is the default value of flex-wrap so it can be omitted in the below examples}