Javascript 为什么在React项目的CSS中添加水平滚动条时div的大小会减小？

请参考这张图片

两张列表中的卡片尺寸相同。但在第二个列表中，我启用了滚动。启用它后，维度突然改变，事情变得笨拙

我附上源代码：

const cast_lists = this.state.cast.map(ar =>{
            return(
                    <Card style={{ width: 120, height : 230, borderColor : "black", borderWidth: 1, borderStyle : "solid", marginLeft: 5, position: "relative"}}>
                <Card.Img variant="top" src={"https://image.tmdb.org/t/p/w500" + ar.profile_path} style = {{height: 150, width: 120, marginLeft: -60, borderColor : "black", borderWidth: 10, position: "relative"}} />
                <Card.Body>
                    <Card.Title style = {{paddingTop: 150, paddingLeft: 0, fontWeight: "bold"}}> {ar.name} </Card.Title>
                    <Card.Body>{ar.character}</Card.Body>
                </Card.Body>
            </Card>
            )
        }) 

const cast\u list=this.state.cast.map（ar=>{
返回(
{ar.name}
{ar.character}
)
}) 

作为渲染的返回，代码为：

<div  className = {styles.top}>
                   <h2>Top Crew</h2>
                   <div style = {{display: "flex", flexDirection : "row", overflow: "auto"}}>
                   {crew_lists.slice(0,5)}
                   </div> 
                   <h2>Top Crew</h2>
                   <div style = {{display: "flex", flexDirection : "row", overflowX: "scroll", width: 500}}>
                   {cast_lists}
                   </div>    
            </div>

高级船员
{crew_list.slice（0,5）}
高级船员
{cast_list}

style.top将高度和宽度设置为100%。 请帮我修一下这个

编辑： 删除第二个宽度时，水平滚动条消失。此外，上述组件也会变形。附加屏幕截图

---

您是否尝试过从第二个

分区中删除
宽度：500
您是否尝试过从第二个
分区中删除
宽度：500
您应该将最小宽度属性插入到您的卡组件样式中

<Card style={{ width: 120, height : 230, minWidth:120, borderColor : "black", borderWidth: 1, borderStyle : "solid", marginLeft: 5, position: "relative"}}>



所以我在卡片样式中添加了
minWidth
属性。
希望它能起作用。
您应该在您的卡片组件样式中插入min width属性

<Card style={{ width: 120, height : 230, minWidth:120, borderColor : "black", borderWidth: 1, borderStyle : "solid", marginLeft: 5, position: "relative"}}>



所以我在卡片样式中添加了
minWidth
属性。
希望它能起作用。
你能给我发送你网站的url吗？或者至少你使用了什么卡片组件？@development忍者你好。我使用了React引导的卡组件。正如你所看到的，我在风格上也做了一些改变。你能把你的网址发给我吗？我还没有在myside上安装react引导。如果你不想公开，你可以私下发给我。你能在这里粘贴完整的代码吗？我刚刚安装了bootstrapdid，你已经解决了这个问题吗？你能给我发送你网站的url吗？或者至少你使用了什么卡片组件？@development忍者你好。我使用了React引导的卡组件。正如你所看到的，我在风格上也做了一些改变。你能把你的网址发给我吗？我还没有在myside上安装react引导。如果你不想公开，你可以私下发给我。你能在这里粘贴完整的代码吗？我刚刚安装了bootstrapdid您已经解决了这个问题吗？我已经编辑了问题并添加了所需的屏幕截图。我已经编辑了问题并添加了所需的屏幕截图。@abc您尝试过我的答案了吗？请就我的答案获得反馈）@abc请让我知道你的反馈。@abc你试过我的答案了吗？请就我的答案获得反馈）@abc请让我知道你的反馈。