如何修复flexbox布局中内容元素被侧边栏宽度偏移的问题

问题根源 #

这个问题是flex布局的默认特性导致的：flex容器的直接子元素默认min-width值为auto，当子元素内部内容的最小宽度大于flex分配给该子元素的宽度时，子元素会被内容撑开，突破flex分配的宽度限制。
你的场景里，侧边栏固定250px宽度，当视口宽度足够时右侧容器可以正常占满剩余空间；当视口缩小到右侧容器宽度小于表格的最小宽度时，表格会撑开右侧容器，导致右侧容器整体溢出视口，视觉上就会出现表格偏移、部分内容不可见的情况，偏移宽度刚好等于侧边栏宽度。同时你给右侧容器加的w-100类也干扰了flex的宽度计算逻辑，放大了这个问题。

解决方案 #

只需做两处简单修改即可修复：

1. 调整.right-container的CSS规则，新增min-width: 0属性，强制右侧容器遵守flex分配的宽度，不会被内部内容撑开
2. 移除HTML中.right-container元素上的w-100类，避免和flex宽度计算逻辑冲突

修改后的CSS代码 #

.right-container {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 250px;
    /* 新增以下属性 */
    min-width: 0;
}

修改后的HTML对应代码 #

<div class="right-container d-flex">
    <!-- 其余右侧内容保持不变 -->
</div>

修改完成后，当页面宽度小于表格最小宽度时，表格外层的table-responsive会正常触发横向滚动，表格不会跑出可视区域，侧边栏也会保持固定宽度，符合你的布局需求。

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