如何防止弹性项目溢出柔性父母而无需包装

Question

我有一个带有 flex-direction: row的flexbox。子项目具有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

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

您正在强迫您的孩子元素具有特定的宽度，就像@michael_b所述，这实质上创建了一个静态环境，无论父母如何，它们都将保持固定宽度。p>本质上，在这一点上，由于您知道孩子元素的最小宽度，因此我会根据特定的宽度要求创建媒体查询，在这种情况下为100px。屏幕达到上述尺寸后，您的父母通过向父母添加flex-wrap: wrap;来迫使您的父母包装物品。当您在所述宽度外面时，请确保将父母的CSS恢复为不允许包装，flex-wrap: nowrap;。这将允许您的子项目包裹，您的父母将在页面上创建水平。

Answer 3

您可以在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>

Answer 4

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

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

这是一个更详细的解释(涵盖包装行为，但也适用于溢出(：

• 使容器包裹时收缩到拟合子元素

您需要脚本或可能的媒体查询才能根据需要进行布局工作。