Html 如何使用flexbox将溢出的内容包装在一行中？

我有一个容器

div

，其中有许多具有固定宽度的子

div

。我正在使用

flexbox

将子div对齐到一行中。下面是html和css的工作原理，除了第一个子和最后一个子仍然溢出容器div。我希望使用水平滚动将子div包装在一行中-

.container{
显示器：flex；
证明内容：中心；
宽度：500px；
高度：200px；
背景颜色：灰色；
溢出-x：自动；
}
.孩子{
保证金：5px；
最小宽度：100px；
高度：150像素；
背景色：暗灰色；
}

---

您应该将所有子项包装到其他标记中，以显示完整内容而不会溢出

.container{
显示器：flex；
宽度：500px；
高度：200px；
溢出：自动；
}
.软盒{
显示器：flex；
证明内容：中心；
背景颜色：灰色；
弹性：1；
}
.孩子{
保证金：5px；
最小宽度：100px；
高度：150像素；
背景色：暗灰色；
}

remove

justify content:center来自
.container
类。。我想问题会解决的谢谢@noor！删除
后对齐内容：居中，最后一个元素仍然溢出。并且子div的数量是动态的。如果容器只有几个子项，我想将它们居中对齐。您说过我希望使用水平滚动将子div包装成一行。你的代码不是已经这样做了吗？Html和css可以工作，除了第一个子和最后一个子仍然溢出容器div。