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>

编辑：我使用“应该”的假设是，white-space: nowrap应用于内联子级的典型div 会增长以容纳其子级；但是，这也不是真的（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>

如果您向 html 添加边框，那么对于 body 元素也是如此，因为这也是一个块元素：

.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.

这个逻辑适用于我们的所有元素，直到我们到达视口：

根元素所在的包含块是一个称为初始包含块的矩形。对于连续媒体，它具有视口的尺寸并锚定在画布原点；它是分页媒体的页面区域。初始包含块的“方向”属性与根元素相同。

同样在您的情况下，无法仅包含所有元素，因为您使用的百分比定义元素的宽度（在所有情况下）将大于父级。你得到4*75%的总是比 更大100%。

所以无论你做什么，你总会遇到溢出：

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

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

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

body {
  border:2px solid green;
}

但如果宽度是使用像素定义的（例如，我们考虑 500px），那么父元素可能会包含具有该inline-flex设置的子元素。

<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>

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

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

body {
  border:2px solid green;
}

在这种情况下，宽度是收缩到适合的宽度，如下所述：

收缩以适合宽度的计算类似于使用自动表格布局算法计算表格单元格的宽度。粗略地：通过格式化内容来计算首选宽度，而不在发生显式换行的情况下换行，并且还计算首选最小宽度，例如，通过尝试所有可能的换行符。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

<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>

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

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

body {
  border:2px solid green;
}

更多详细信息请参见：/sf/answers/2404881321/

^{nowrap是默认值，flex-wrap因此在下面的示例中可以省略}