内容重叠的CSS问题

Question

我有一排新闻卡。

用户可以在左侧或右侧滚动浏览低谷新闻。

问题是，滚动前只能看到一张新闻卡。

问题截图：

这是本节的HTML / jsx部分：

 <div
    className="find-more-row"
    ref={(node) => {
       this.findMoreDocWrapper = node;
     }}
  >
     <div className="find-more-collection-wrapper spacing-outher-top">
       <div className="doc-related-trends-label related-trends-icon">
         <i className="material-icons md-19 related-trends-icon">trending_up</i>           
             Football
        </div>
          <FindMoreCard thumbnail={img} />
          <FindMoreCard thumbnail={img} />
        <div className="find-more-btn-wrapper">
          <Button color="#000a12" width="100%" fontSize="14px" />
        </div>
  </div>

CSS部分：

.doc-scrollbuttons-wrapper {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 92.5%;
  margin-top: 10%;
  margin-left: -46px;
}


.find-more-section {
  padding: 50px 96px;

  .find-more-collection-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 33.3%;
    max-width: 33.3%;
    height: 300px;
  }

  .find-more-row {
    display: flex;
    overflow-y: auto;
  }

如何解决这个问题，有什么想法吗？