React Styled Components：段落元素延伸至相邻图片下方的问题求助

在React项目中使用styled-components开发时，遇到段落元素显示异常：段落文本会延伸至相邻图片的下方。尝试通过设置max-width让文本触碰到图片最大宽度时自动换行，但该方案未生效，特此求助。

相关代码 #

const InnerCarousel = styled.div`
    display: flex; // 用flexbox居中图片
    justify-content: center; // 水平居中
    align-items: center; // 垂直居中
    height: 110vh; // 让卡片占满视口高度
`;
const Texts = styled.div`
    padding: 4em;
    max-width: 30vw;
`;
const Images = styled.img`
    min-width: 10vw;
    max-width: 60vw;
    min-height: 10vh;
    max-height: 60vh;
    border-radius: 60px;
`;
const H1 = styled.h1`
    font-size: 24px;
`;
const Paragraph = styled.p`
    font-size: 16px;
    color: black;
    font-family: 'Mont-serrat', sans-serif;
    max-width: 30vw;
`;

export default function CarouselHome() {
  return (
    <>
      <Swiper navigation={true} modules={[Navigation]} className="mySwiper">
        <SwiperSlide style={{ height: '80vh' }}>
          <InnerCarousel>
            <Texts>
              <H1>eCO Funding</H1>
              <Paragraph>ParagraphParagraphParagraphParagraphParagrapParagraphParagraphParagraphParagraphParagraph </Paragraph>
            </Texts>
            <Images src={Image} alt="carousel" />
          </InnerCarousel>
        </SwiperSlide>
      </Swiper>
    </>
  );
}

问题截图 #

内容的提问来源于stack exchange，提问作者LuigiHard