如何防止flex-items溢出flex flex而没有换行？

Question

我有一个弹性箱flex-direction: row.儿童用品min-width有一套.当窗口缩小min-width到达到达的点时,项目开始溢出Flex容器.

.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-items永远不会溢出Flex容器,即使它导致页面需要水平滚动.

注:我有其他更复杂的逻辑需要flex-basis: 0px和flex-grow: 1,因此这些行不能被移除.

Answer 1

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 2

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

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