React-Splide testimonial carousel屏幕Resize时无响应问题求助

我有一个两列网格布局页面，两列的容器均设置为flex布局。第一列容器内有一个React-Splide轮播组件，用于渲染映射后的评论数据。当作为简单图片轮播使用时可正常工作，但一旦映射并返回h1或其他HTML元素，轮播组件就无法随屏幕Resize自适应。

轮播组件代码 #

const TestimonialCarousel = () => {
  return (
    <Splide
      options={{
        rewind: true,
      }}
    >
      {testimonialsData.map((item, index) => {
        return (
          <SplideSlide key={index}>
            <Card>
              <QuoteTop />
              <ReviewLink href={item.link} target="_blank">
                <CardHeader>
                  <ImgWrapper>
                    <Img src={item.src} alt={item.alt} />
                  </ImgWrapper>
                  <HeaderText>{item.name}</HeaderText>
                </CardHeader>
              </ReviewLink>
              <Hr />
              <CardContent>{item.review}</CardContent>
              <Hr />
              <CardRating>{item.rating}</CardRating>
              <QuoteButtom />
            </Card>
          </SplideSlide>
        );
      })}
    </Splide>
  );
};

样式代码 #

import styled from "styled-components";
import { RiDoubleQuotesL } from "react-icons/ri";

export const CarouselContainer = styled.div`
  position: relative;
  max-height: 400px;
  max-width: 400px;
`;

export const Card = styled.div`
  display: flex;
  flex-direction: column;
  aspect-ratio: 1/1;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
`;

export const QuoteTop = styled(RiDoubleQuotesL)`
  position: absolute;
  top: 0px;
  left: 15px;
  color: #1ebbd7;
  font-size: 5rem;
  opacity: 60%;
`;

export const QuoteButtom = styled(RiDoubleQuotesL)`
  position: absolute;
  bottom: 0px;
  right: 15px;
  transform: rotate(180deg);
  color: #1ebbd7;
  font-size: 5rem;
  opacity: 60%;
`;

export const ReviewLink = styled.a`
  text-decoration: none;
`;

export const CardHeader = styled.h1`
  cursor: pointer;
  display: flex;
  height: auto;
  align-items: center;
  flex-direction: row;
  padding: 5px;
`;

export const ImgWrapper = styled.div`
  border-radius: 100px;
  border: 2px solid #1ebbd7;
`;

export const Img = styled.img`
  border-radius: 100px;
  height: 45px;
`;

export const HeaderText = styled.h2`
  color: #fff;
  font-size: 1.5rem;
  margin-left: 8px;
`;

export const Hr = styled.hr`
  margin: 15px 0;
  color: #1ebbd7;
  border-top: 2px solid;
  border-radius: 25px;
  width: 50px;
  border-bottom: none;
  opacity: 80%;
`;

export const CardContent = styled.p`
  text-align: center;
  color: #fff;
  font-size: 1rem;
  line-height: 26px;

  @media screen and (max-width: 480px) {
    font-size: 0.9rem;
  }
`;

export const CardRating = styled.p`
  color: #fff;
  font-size: 1rem;
`;

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