Html 内容重叠的CSS问题

我有一排新闻卡

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

问题是在滚动之前一张新闻卡是可见的

问题截图：

这是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>

.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;
  }

---

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

有没有可能是因为33.3乘以3不等于100%，所以显示了不需要的区域？我将试着用33.4或类似的烟雾：）@showdev是的，问题解决了，谢谢：）有没有可能是因为33.3乘以3不等于100%，所以显示了不需要的区域？我将尝试放置33.4或类似的烟雾：）@showdev是的，这解决了问题，谢谢：）