Flex水平滚动CSS

Question

我希望我的物品水平滚动。当前，有一个专门用于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>
        )
    }