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

Question

我有一个带有 flex-direction: row 的 flexbox。子项目有一个 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 ，因此无法删除这些行。

原文由 thedarklord47 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 .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;
}

原文由 Robert O‘Reilly 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 CaliCo 发布，翻译遵循 CC BY-SA 3.0 许可协议