溢出滚动不显示所有包含的内容

Question

我正在开发一个简单的纸牌评论游戏，我认为拥有一个可以滚动浏览的小画廊会很酷。不幸的是，由于某种原因，我无法滚动浏览内容的整个宽度。外围总是有未完全显示在显示卡中的卡。我一直在在线研究解决方案，以查看是否可以让他们解决我的问题，但到目前为止还没有解决。

最有前途的解决方案是给.cardSlideShow类一个固定的宽度（px或％），但是它会将其撕出页面并忽略溢出规则。

有什么想法吗？

//Each Card
.card-topic {
  @include flex-column;
  justify-content: center;
  background-color: white;
  // background: linear-gradient(right, white, rgb(194, 127, 127));
  box-shadow: 5px 5px 10px rgb(56, 56, 56);
  border-radius: 8px;
  margin: 0 -60px;
  transform: rotate(2deg);
  border: 3px solid $color3;
  height: 95%;
  max-height: 450px;
  min-height: 400px;
  min-width: 300px;
  width: 315px;
  text-align: center;
  z-index: 1;
}

//Slideshow
.cardSlideShow {
  display: flex;
  border: 1px solid red;
  align-items: center;
  justify-content: center;
  height: 55vh;
  min-height: 425px;
  max-height: 575px;
  // width: 300%;
  overflow-x: scroll;
}