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

【问题标题】：Why does the size of div decrease on adding a horizontal scrollbar in CSS of React project?为什么在 React 项目的 CSS 中添加水平滚动条时 div 的大小会减小？
【发布时间】：2021-02-25 18:52:30
【问题描述】：

请参考这张图片。 enter image description here

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

我附上源代码：

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>
            )
        })

返回render，代码为：

<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>

styles.top 将高度和宽度设置为 100%。请帮我解决这个问题。

编辑：删除第二个宽度后，水平滚动条消失。上述组件也会失真。附上截图

【问题讨论】：

你能把你网站的网址发给我吗？或者至少你使用了什么卡片组件？
@development-ninja 嗨。我使用了 React Bootstrap 的 Card 组件。如您所见，我还对样式进行了一些更改。
你能把你的网址发给我吗？我还没有在我这边安装 react-bootstrap。不想公开的可以私信我
你能在这里粘贴完整的代码吗？我刚刚安装了引导程序
你已经解决了这个问题吗？

标签： javascript css reactjs frontend scrollbar

【解决方案1】：

您应该将 min-width 属性插入到您的 Card 组件样式中

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

所以我在卡片样式中添加了minWidth 属性。希望它有效。

【讨论】：

@abc 你试过我的答案了吗？请对我的回答提出反馈））
@abc 请让我知道您的反馈意见。

【解决方案2】：

您是否尝试过从第二个 div 中删除 width: 500

【讨论】：

我已经编辑了问题并添加了所需的屏幕截图。