Html 溢出时从左到右隐藏项目

我有一个包含子项的div，如果没有足够的空间容纳它们，我想隐藏这些项，但是从flex start而不是flex end隐藏它们

.parent{
高度：50px；
宽度：500px；
显示器：flex；
柔性流：行换行；
溢出：隐藏；
}
.孩子{
身高：100%；
宽度：200px；
背景色：红色；
}

1.
2.
3.

我希望我能正确理解你的问题

.parent{
高度：50px；
宽度：500px；
显示器：flex；
弯曲方向：行；
证明内容：柔性端；
溢出：隐藏；
背景颜色：浅灰色；
位置：相对位置；
填充：10px；
}
.孩子{
高度：30px；
最小宽度：50px；
背景色：暗灰色；
颜色：白色；
左边距：10px；
字体大小：24px；
填充：10px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11

Hi Erkan，谢谢你的回答，很接近，但不是我想要的：在这种情况下，如果所有项目都有足够的空间，它们将被放置在右边框，但我希望它们从左开始。我对你想要什么有点困惑。不管有多少溢出，所有的孩子都在同一条线上吗？（由于CSS中的“包装”，我感到困惑）。