Bootstrap 5 Carousel在Flexbox祖先容器中切换图片时宽度翻倍问题

问题原因 #

该问题由Flex布局的默认特性触发：Flex容器的直接子元素（flex item）默认min-width属性值为auto，会保证子元素宽度不会小于其内部内容的实际宽度。
Bootstrap 5 Carousel的滑动切换逻辑会在过渡过程中同时渲染两个carousel-item（当前激活项和待切换项），两个宽度为100%的元素并列会让内部内容宽度暂时翻倍，此时作为flex item的.carousel-container会被内容撑大，进而挤压同级的侧边栏元素，和给.carousel-container设置display:block无关——只要它本身是flex布局的子元素，就会受min-width:auto规则约束。

解决方案 #

方案1：最简修复（适配动态宽度场景） #

直接给作为flex子项的轮播容器覆盖min-width规则即可，不需要改动其他代码：

.carousel-container {
    display: block;
    min-width: 0; /* 新增该规则 */
}

min-width:0允许flex子项被压缩到小于内部内容宽度，Carousel自带的溢出隐藏规则会自动裁剪过渡阶段超出容器的内容，不会出现布局错乱。

方案2：固定比例布局（适配固定占比场景） #

如果页面需要固定轮播和侧边栏的宽度占比，直接给两个flex子项分配固定的宽度份额即可，稳定性更强：

.carousel-container {
    /* 固定占用flex父容器80%的宽度，可根据需求调整比例 */
    flex: 0 0 80%;
    overflow: hidden;
}
.aside {
    /* 侧边栏占用剩余20%宽度 */
    flex: 0 0 20%;
}

内容的提问来源于stack exchange，提问作者Schmause R Schlurimuri