Css 如何强制flex子项不溢出容器？

给定一个flexbox容器，我如何确保，如果孩子们有很多内容，他们不会溢出容器

.container{
显示器：flex；
弯曲方向：立柱；
背景色：#ccc；
高度：210px；
宽度：200px；
}
.孩子{
显示器：flex；
宽度：100px；
}
.首先{
背景色：rgba（255,0,0,0.2）；
}
.第二{
背景色：rgba（0,255,0,0.2）；
}
.第三{
背景色：rgba（0,0,255,0.2）；
}

首先
第二秒第二秒第二秒第二秒第二秒
第三

使用

最小高度：210px

不是显式设置容器的高度，而是让一个超长的子容器扩展其高度，从而获得所需的效果

---

还有，很好的问题写作！很高兴看到正在发生的与预期的图表，等等。

您可以在

子元素上使用
溢出：auto
。如果您只想在最大的项目上隐藏
overflow
，那么您可以在该项目上使用
flex:1


.container{
显示器：flex；
弯曲方向：立柱；
背景色：#ccc；
高度：210px；
宽度：200px；
}
.孩子{
显示器：flex；
宽度：100px；
溢出：自动；
}
.首先{
背景色：rgba（255,0,0,0.2）；
}
.第二{
背景色：rgba（0,255,0,0.2）；
弹性：1；
}
.第三{
背景色：rgba（0,0,255,0.2）；
}

首先
第二秒第二秒第二秒第二秒第二秒
第三
子元素溢出其父元素，因为其固有高度（内容的高度）大于父元素的高度。通过在子元素上设置
minheight:0
，可以建议浏览器忽略固有高度。如果添加
overflow:hidden
，结果应该是您期望的结果：


.container{
显示器：flex；
弯曲方向：立柱；
背景色：#ccc；
高度：210px；
宽度：200px；
}
.孩子{
宽度：100px；
最小高度：0；
溢出：隐藏；
}
.首先{
背景色：rgba（255,0,0,0.2）；
}
.第二{
背景色：rgba（0,255,0,0.2）；
}
.第三{
背景色：rgba（0,0,255,0.2）；
}

首先
第二秒第二秒第二秒第二秒第二秒
第三
flex已经
三个值：弹性增长|弹性收缩|弹性基础

您应该为第一个孩子应用特定的最大高度


。首先{
背景色：rgba（255,0,0,0.2）；
弹性：01；
最大高度：70像素；
}
您希望溢出的内容去哪里？把它藏起来？当内容不适合时，我希望有一个滚动条。您希望滚动条…在容器上还是在内容上？滚动条在第一个坏例子中应该在“第二个”内容上，在第二个坏例子中应该在“第三个”内容上。在我看来，您有太多的竞争要求。完全灵活的儿童，没有设置高度，但希望他们在没有设置高度的情况下应用滚动条。我很确定这不可能满足所有的可能性…至少在flexbox中是这样。问题是我不知道哪一项是最大的。它是完全动态的。我知道高度是成比例分布的，但我希望第一个和第三个孩子（在这种情况下）是完全可见的。但是，是的，一般情况下，不清楚什么应该可见，什么应该得到一个滚动条，所以我想你的解决方案是我们能得到的最接近的。@MishaMoroshko：是的，“使任何可以完全可见的东西可见，并隐藏剩余部分的溢出”在CSS中是不可行的。这已经是因为它是不明确的：如果第一个和第三个都可以单独完全可见，但不能同时完全可见，该怎么办？