Css 使滚动条容器适合父容器的宽度

我的滚动条当前看起来像：

我的目标是让它看起来像：

如何将我的

scroll\uu容器

包含在我的

skins\uuu包装

中，以使主题不会溢出容器

皮
原色
{themes.map（（t）=>(
手血红素（t）}
id={t}
>
{t.themeTitle}

))}

.themesContainer{
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
调整项目：灵活启动；
利润率：0px 145px；
边缘顶端：40px；
边界半径：22px；
边界半径：10px；
}
.themes\uuu SkinOptionWrapper{
背景颜色：蓝色；
框阴影：var（--主框阴影）；
边缘底部：100px；
边界半径：var（--主边界半径）；
}
.themes\uuu选项包装器{
最大宽度：100%；
最小宽度：100%；
背景色：白色；
框阴影：var（--主框阴影）；
边缘底部：100px；
边界半径：var（--主边界半径）；
填充：20px；
}
.skins____容器{
背景色：红色；
宽度：400px；
}
.themes\uuu标签{
显示器：flex；
调整内容：灵活启动；
}
.容器名称{
字体系列：Poppins；
字号：500；
字体大小：22px；
填充：20px 0px；
}
.skins\uu wrapper>h6{
字体系列：Poppins；
利润率：10px 10px；
字体大小：16px；
字号：600；
}
.skins___包装{
最大高度：75vh；
最大宽度：100%；
溢出y：自动；
}
/*隐藏Chrome、Safari和Opera的滚动条*/
.skins\uu包装器：--webkit滚动条{
显示：无；
}
/*隐藏IE、Edge和Firefox的滚动条*/
.skins___包装{
-ms溢出样式：无；/*IE和边缘*/
滚动条宽度：无；/*Firefox*/
}
.scroll\u容器{
显示器：flex；
调整内容：灵活启动；
调整项目：灵活启动；
溢出-x：滚动；
边缘底部：30px；
}