水平滚动在溢出x上移动整个身体=滚动

Question

我正在尝试构建一个具有水平滚动能力的组件，并加载Maincontainer渲染的图像，但是当我在页面下方滚动时，整个页面都向右滚动。 请让我知道如何解决此问题。

图片库组件

      <MainContainer>
        <SliderContainer>
          {PiattoImages.map((product, index) => {
            return (
              <>
                <ImageContainer ref={addToRefs}>
                  <img
                    key={index}
                    style={{
                      width: '300px',
                      height: '200px',
                      borderRadius: '25px',
                      aspectRatio: '16:9',
                      imageRendering: 'crisp-edges'
                    }}
                    src={product.productImageURL}
                  />
                </ImageContainer>
              </>
            );
          })}
        </SliderContainer>
      </MainContainer>

样式元素/ CSS：

export const SliderContainer = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
`;

export const ImageContainer = styled.div`
  padding: 5px;
`;

export const MainContainer = styled.div`
  width: 100%;
  overflow-x: scroll;
`;