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

Posted 2023-03-06

【中文标题】为啥在 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。不想公开的可以私信我

你能在这里粘贴完整的代码吗？我刚刚安装了引导程序

你已经解决了这个问题吗？

【参考方案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

【讨论】：

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