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

作为渲染的回报，代码是：

<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%。请帮我解决这个问题。

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

标签： javascriptcssreactjsfrontendscrollbar

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

问题描述

解决方案

推荐阅读