Html 如何防止flex项在没有包装的情况下溢出flex父项？

我有一个flexbox，带有

柔性方向：row

。子项设置了

最小宽度

。当窗口收缩超过

最小宽度

时，项目开始溢出flex容器

.parent{
显示器：flex；
弯曲方向：行；
背景色：红色；
}
.孩子{
最小宽度：100px；
弹性基础：0px；
柔性生长：1；
保证金：5px；
高度：100px；
背景颜色：蓝色；
}

---

如果滚动对您没有影响，您可以在

父容器上使用
overflow-y:auto


.parent{
显示器：flex；
弯曲方向：行；
overflow-y:auto；/*添加此项*/
背景色：红色；
}
.孩子{
最小宽度：100px；
弹性基础：0px；
柔性生长：1；
保证金：5px；
高度：100px；
背景颜色：蓝色；
}
您强制您的子元素具有特定的宽度，就像前面提到的@Michael_B一样，这实际上创建了一个静态环境，在这个环境中，无论父元素是什么，它们都将保持设置的宽度

基本上在这一点上，因为您知道子元素的最小宽度，所以我将在特定的宽度要求下创建一个媒体查询，在本例中为100px。一旦你的屏幕达到上述尺寸，通过添加
flex-wrap:wrap，强迫你的父母使用包装物品发送给您的家长。当您超出上述宽度时，请确保将家长的CSS设置回不允许包装，
flex-wrap:nowrap。这将允许您的子项进行换行，并且您的父项将创建页面的水平面。
在
.parent
类上设置
display:inline flex
，将其更改为内联元素。这也将迫使
.parent
展开以包含其子级。然后通过在
.parent
类上设置
minwidth: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;
}

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

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

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




您需要一个脚本或可能的媒体查询，以使您的布局按需要工作。
很遗憾，此时不允许包装。我正在查找页面上的滚动，但很遗憾，无法在div本身上滚动。您可以在父容器上使用
display:inline flex
。但它包含其子代的总体大小。另一种方法是使用媒体查询。当显示尺寸达到所需的最小宽度时，将
display:flex
更改为
display:inline flex
将被接受，但Roberts answer实际上可以在无需设置刚性宽度的情况下工作。想谈谈他的答案是如何绕过你解释的吗？这个答案实际上并没有回答你的问题：“如何迫使flex parent拉伸以适合孩子的物品？”flex parent从未扩展；它仍然是固定的。这就是我提到的问题，它仍然有效。然而，这个答案确实防止了孩子们满溢，这似乎是你真正需要的（所以I+1）。我很高兴你找到了一个解决方案。但它确实扩展了吗？我可以将窗口一直缩小到最小宽度被强制的位置（并且项目不会溢出），或者将窗口扩大到我想要的大小，并且flex项目/父项可以不受阻碍地增长。编辑：不是这样争论，我只是想理解。好吧，我明白你的意思。但仍然没有扩张。在代码中，容器缩小到内容大小以下（从不展开）。在接受的答案中，它在内容
最小宽度处停止收缩（但再次强调，永远不会展开）。是的。我们现在在同一页：-）这也将迫使
.parent
展开以包含其子级。对的就父容器而言，这与
display:flex
没有什么不同。容器的宽度永远不会改变。唯一的区别（在本例中似乎是关键）是使用
inline flex
可以防止子容器溢出。
min width:1px为我解决了问题。在我的例子中，只需在孩子身上添加
最小宽度
，就行了；我没有在父级上使用
inline flex
。我只需要在父级上使用
minwidth