Flex水平滚动CSS

问题描述

我希望我的物品水平滚动。当前，有一个专门用于div容器的滚动条，但是它垂直堆叠了这些项目，并且正在滚动。如何解决此问题，使它们在水平方向对齐并在水平方向滚动？预先谢谢你：）

CSS：

.homecontent .scrollingwrapper {
  display: flex;
  flex-wrap: nowrap; 
  overflow: auto;
}

.homecontent .scrollingwrapper .redditdata {
  flex: 0 0 auto;
  height: 500px;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  border: 7.5px solid #2B2D42;
  border-radius: 15px;
}

HTML：

render(){
        return(
            <div className="homecontent">
                <h1>text</h1>
                <p>text</p>
                <h3>Currently on Reddit:</h3>
                <div className="scrollingwrapper">
                    <div className="redditdata">
                        <img src={backwards} height='100' className="backbutton"/>
                        {this.itsCardTime()}
                        <img src={forwards} height='100' className="morebutton"/>
                    </div>
                </div>
            </div>
        )
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）