Flexbox实现轮播时子元素无法随屏幕自适应缩放问题求助

问题原因 #

• .carousel-container 未设置 overflow: hidden，当子元素总宽度超过视口宽度时，超出部分不会被裁剪，直接露出了右侧相邻的其他轮播容器。
• Flex容器.track未设置宽度限制，作为绝对定位元素默认宽度由子元素内容撑开，无法适配父级carousel-container的100vw宽度，导致Flex自适应特性失效。
• 作为Flex子项的图片.carousel-element未配置缩放规则，图片作为替换元素默认不会主动收缩，缺少flex-shrink、max-width、max-height等限制尺寸的属性，无法等比适配容器宽度。
• 轮播按钮设置了left/right定位但未声明position: absolute，定位属性不生效。

修正方案 #

替换原有CSS为以下内容即可解决问题：

.carousel-wrapper {
    position: relative;
    width: 300vw;
    height: 35vh;
}

.carousel-container{
    margin-top: 5vh;
    position: absolute;
    width: 100vw;
    height: 30vh;
    /* 新增：超出部分裁剪，避免露出其他轮播容器 */
    overflow: hidden;
}

.track{
    display: flex;
    align-items: center;
    /* 新增：宽度匹配父容器，给Flex缩放提供基础 */
    width: 100%;
    height: 100%;
    /* 移除原有绝对定位和位移，用justify-content控制间距更稳定 */
    justify-content: space-between;
    padding: 0 2%;
    box-sizing: border-box;
}

.carousel-container--one{
    transform: translateX(0%);
}

.carousel-container--two{
    transform: translateX(100%);
}

.carousel-container--three{
    transform: translateX(200%);
}

.carousel-button {
    height: 4vh;
    z-index: 2;
    flex-shrink: 0;
}

.carousel-element{
    margin: 0 5px;
    /* 新增：图片允许收缩，最大高度匹配容器，最大宽度按3份均分预留间距 */
    flex-shrink: 1;
    max-height: 100%;
    max-width: calc(33.33% - 10px);
    /* 新增：图片等比缩放 */
    object-fit: contain;
}

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