Css 如何制作项目宽度不固定的水平滚动部分

我创建了以下示例：

.container{
高度：50px；
显示器：flex；
柔性包装：nowrap；
溢出-x：滚动；
垫面：3件；
垫底：3件；
左侧填充：6px；
右边填充：6px；
背景：浅灰色；
}
.卡片{
最小宽度：200px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：1px纯白；
边际上限：0px；
边缘底部：0px；
左边距：3倍；
右边距：3倍；
}
.卡片决赛{
右边填充：6px；
}

猫
热带鱼
南Titiwangsa弯趾壁虎
啄木鸟
乌鸦
雄孔雀
猪
狗

移除

最小宽度

并使用

弹性收缩：0


.container{
高度：50px；
显示器：flex；
柔性包装：nowrap；
溢出-x：滚动；
垫面：3件；
垫底：3件；
左侧填充：6px；
右边填充：6px；
背景：浅灰色；
}
.卡片{
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：1px纯白；
边际上限：0px；
边缘底部：0px；
左边距：3倍；
右边距：3倍；
弹性收缩：0；
}
.卡片决赛{
右边填充：6px；
}

猫
热带鱼
南Titiwangsa弯趾壁虎
啄木鸟
乌鸦
雄孔雀
猪
狗
乌鸦
雄孔雀
猪
狗
乌鸦
雄孔雀
猪
狗