Question

我有一个带flex-direction: row的弹箱。子项目设置为min-width。当窗口缩小到达到min-width的点时，项目开始溢出Flex容器。

＆＃13;

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

＆＃13;

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

＆＃13;

https://jsfiddle.net/4t8029q8/

有没有办法强制容器伸展以包含项目而不在父项上设置明确的min-width？这样做提供了我想要实现的行为，但是过于拘泥于容纳可变数量的项目。

＆＃13;

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

＆＃13;

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

＆＃13;

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;。这将允许您的子项目换行，并且您的父项将创建一个水平页面。

Answer 3

如果滚动与您无关，则可以在overflow-y: auto容器上使用parent。

.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呈现引擎不会自动重新流动源文档，所以容器无法知道子项何时溢出并因此扩展。你是在一个静态的环境中。这个概念也适用于包装。

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

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

您需要一个脚本或可能的媒体查询，以使您的布局按需运行。

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

4 个答案: