如何防止弹性项目在没有包装的情况下溢出弹性父项？

Question

我有一个带有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-basis: 0px 和 flex-grow: 1，因此无法删除这些行。

Answer 1

您要求容器流畅地调整大小，以防止子元素溢出。这是动态行为，是 JavaScript 的领域，而不是 HTML 或 CSS。

由于 HTML 和 CSS 渲染引擎不会在子元素溢出其容器时自动重新排列源文档，因此容器无法知道子元素何时溢出并因此展开。您处于静态环境中。这个概念也适用于包装。

这里有一个更详细的解释（包括包装行为，但也适用于溢出）：

• Make container shrink-to-fit child elements as they wrap

您需要一个脚本或可能的媒体查询来使您的布局按需要工作。

Answer 2

在 .parent 类上设置 display: inline-flex 以将其更改为内联元素。这也将强制 .parent 扩展以包含其子项。然后通过在.parent 类上设置min-width: 100%，它将强制它扩展到包含元素的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 3

您强制您的子元素具有特定宽度，就像提到的@Michael_B 一样，这实质上创建了一个静态环境，无论父元素如何，它们都将保持设置的宽度。

基本上在这一点上，由于您知道子元素的最小宽度，我将创建一个媒体查询，在特定的宽度要求下，在本例中为 100 像素。一旦您的屏幕达到上述尺寸，请通过将flex-wrap: wrap; 添加到您的父母来强制您的父母有包装物品。当您超出上述宽度时，请务必将您父母的 CSS 设置为不允许换行，flex-wrap: nowrap;。这将允许您的子项进行换行，而您的父项将创建一个水平页面。

Answer 4

如果滚动不重要，您可以在 parent 容器上使用 overflow-y: auto。

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