css - Pure-React-Carousel Flex 框对齐

Question

我试图在左侧有一些文本，在右侧有我的纯反应轮播。

旋转木马拉伸以填充其父级的宽度。

如何将 flexbox 调整为 50% 的宽度而没有轮播而不在 y 轴上溢出？

索引.js

const index = () => {
  return (
    <div>
      <div className="flex">
        <div className="bg-red-200 w-1/2">Hello</div>
        <div className="bg-gray-400 w-1/2 ">
          <Carousel />
        </div>
      </div>
      <div>
        <h1>THIS IS A BLOCK ELEMENT</h1>
      </div>
    </div>
  );
};

Carousel.js（纯反应轮播）

const Carousel = () => {
  return (
    <CarouselProvider
      naturalSlideWidth={100}
      naturalSlideHeight={125}
      totalSlides={3}
    >
      <Slider className="rounded">
        <Slide index={0}>
          <img
            src="https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
            alt=""
          />
        </Slide>
        <Slide index={1}>
          <img
            src="https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
            alt=""
          />
        </Slide>
        <Slide index={2}>
          <img
            src="https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
            alt=""
          />
        </Slide>
      </Slider>
    </CarouselProvider>
  );
};