Html 如何使用flexbox使父div的宽度与子项的宽度相匹配？

我有一个灵活的父div，里面有更多的元素，但是父宽度不适合子元素，我如何修复它

基本上，我想显示一个二维矩阵，其尺寸由用户设置，因此内部元素的数量会有所不同，并且会出现一些换行符，如我在下面的代码中所示，并且子元素的宽度和高度是固定的

.parent{
显示器：flex；
柔性包装：包装；
背景颜色：银色；
填充物：5px；
边界半径：10px；
}
.孩子{
宽度：40px；
高度：40px；
边界半径：10px；
背景颜色：金色；
保证金：5px；
}
.换行{
宽度：100%；
}

---

您可以通过一个简单的

内联块

配置来实现这一点：

.parent{
显示：内联块；
背景颜色：银色；
填充物：5px；
边界半径：10px；
字体大小：0；/*要删除空白：*/
保证金：5px；
}
.孩子{
高度：40px；
宽度：40px；
显示：内联块；
垂直对齐：顶部；
边界半径：10px；
保证金：5px；
背景颜色：金色；
字号：首字母；
}
.换行{
显示：块；
}

谢谢，我想我需要保留flex布局，但效果非常好，谢谢你的帮助。