Css 使用React使我的水平滚动动态

所以我有一个组件，我将不同的照片集传递给它。每套照片各不相同，这意味着其中可能有8张照片或35张照片。如果有8张照片，我的CSS中的宽度太大，但是如果我有35张，宽度就刚好合适

//parent container
.portfolio { 
  position: relative;
  z-index: 1;
  overflow-x: scroll;
  background: linear-gradient(
    319deg,
    rgba(8, 8, 8, 1) 0%,
    rgba(38, 37, 37, 1) 100%
  );
  display: flex;
  width: auto;
  height: 100vh;
}

//child
.react-photo-gallery--gallery div {
    position: absolute;
    top: 50%;
    width: 800vw;
    transform: translateY(-50%);
    margin-left: 15vw;
    background: transparent;
    border: 1px solid white;
}

我发现这个代码沙盒正在做我想做的事情，但是当我在我的机器上使用它时，它会使图片变小。他们改变了宽度：800vw；到

flex-flow:nowrap！重要信息

这两种解决方案都不适合我，我希望有人知道如何动态调整容器宽度。这就是我现在拥有的