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

Posted 2023-03-05

【中文标题】如何防止弹性项目在没有包装的情况下溢出弹性父项？

【英文标题】：How to prevent flex-items from overflowing flex parent with no wrap?

【发布时间】：2018-10-08 15:13:26

【问题描述】：

我有一个带有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，因此无法删除这些行。

【参考方案1】：

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

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

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

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

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

【讨论】：

本来打算接受，但罗伯茨的回答实际上不需要设置严格的宽度。是否愿意评论他的回答如何绕过您的解释？

该答案实际上并没有回答您的问题：“如何强制 flex 父项拉伸以适应子项？” flex 父项永远不会扩展；它保持不变。这就是我解决的问题，它仍然有效。但是，该答案确实可以防止孩子溢出，这似乎是您真正需要的（所以我+1）。很高兴您找到了解决方案。

它确实扩展了吗？我可以将窗口一直缩小到强制最小宽度的位置（并且项目不会溢出），或者将窗口扩大到我想要的大小，并且弹性项目/父项不受阻碍地增长。编辑：不是以我只想理解的方式争论。

好的，我明白你在说什么。但是，仍然没有扩展。在您的代码中，容器缩小到内容大小以下（从不扩展）。在接受的答案中，它在内容 min-width 处停止收缩（但同样，永远不会扩展）。

是的。我们现在在同一页面上:-)

【参考方案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;

【讨论】：

这也将强制 .parent 扩展以包含其子项。 正确。就父容器而言，这与display: flex 没有什么不同。容器的宽度永远不会改变。

唯一的区别（在这种情况下似乎是关键）是inline-flex 可以防止孩子溢出容器。

min-width: 1px; 对正在伸展的孩子解决了我的问题。

就我而言，只需在孩子身上添加min-width，就可以了；我没有在父级上使用inline-flex。

我所需要的只是父级上的min-width

【参考方案3】：

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

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

【讨论】：

很遗憾在这种情况下不允许换行

【参考方案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>

【讨论】：

在页面上滚动是我想要的，但不幸的是不能在 div 本身上滚动。

您可以在父容器上使用display: inline-flex。但它包含其子项的总体大小。另一种方法是使用媒体查询。当 display-size 达到所需的最小宽度时，将 display: flex 更改为 display: inline-flex