Flex布局下Overflow:auto导致滚动条重叠内容的问题求助

我完全懂你这恼人的问题——同样用Bootstrap的flex容器，水平滚动条会自动让容器增高来容纳自己，完全不挤压内容；可垂直滚动条却硬挤在容器内部，把内容给压窄了，而且IE、Edge、Firefox都这样，Chrome还偶尔抽风式正常，确实离谱。

问题根源 #

这其实是不同浏览器对flex容器中滚动条布局规则的计算差异：

• 水平滚动时，浏览器默认把滚动条的高度算在容器外部尺寸里，所以容器会自动增高放下滚动条，不会影响水平内容宽度。
• 垂直滚动时，多数浏览器（除了Chrome偶尔的特殊处理）会把滚动条宽度算在容器内部可用空间里，直接挤压内容。

跨浏览器解决方案 #

下面给你几个可行的方法，覆盖新旧浏览器：

1. 使用CSS scrollbar-gutter 属性（现代浏览器优先）

这是CSS专门为这类场景新增的属性，能提前预留滚动条的空间，不管滚动条是否出现，都不会让内容跳动或挤压。

修改右侧垂直滚动容器的代码：

<div class="d-flex flex-column flex-shrink-0 bg-dark overflow-auto" style="scrollbar-gutter: stable;">
  <!-- 内部内容保持不变 -->
</div>

scrollbar-gutter: stable 会给滚动条预留固定宽度，即使滚动条没出现，这个空间也会保留；如果需要左右都预留，也可以用scrollbar-gutter: stable both-edges，垂直滚动只需要单侧就行。

兼容性：Chrome、Firefox、Edge 96+都支持，IE不支持，需要做降级处理。

2. 手动预留滚动条宽度（兼容旧浏览器）

对于IE这类不支持scrollbar-gutter的浏览器，可以手动给容器加右侧内边距，宽度取滚动条默认宽度（一般是17px左右）：

<div class="d-flex flex-column flex-shrink-0 bg-dark overflow-auto" style="padding-right: 17px;">
  <!-- 内部内容保持不变 -->
</div>

要是担心不同浏览器滚动条宽度不一致，也可以用JS动态计算：

// 计算当前浏览器的滚动条宽度
function getScrollbarWidth() {
  const scrollDiv = document.createElement('div');
  scrollDiv.style.width = '100px';
  scrollDiv.style.height = '100px';
  scrollDiv.style.overflow = 'scroll';
  scrollDiv.style.position = 'absolute';
  scrollDiv.style.top = '-9999px';
  document.body.appendChild(scrollDiv);
  const width = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  document.body.removeChild(scrollDiv);
  return width;
}

// 给垂直滚动容器添加对应宽度的内边距
document.querySelector('.bg-dark.overflow-auto').style.paddingRight = `${getScrollbarWidth()}px`;

3. 调整Flex容器的尺寸计算逻辑

给垂直滚动容器设置width: fit-content，同时确保父容器的flex布局不会强制压缩它：

<div class="d-flex flex-column flex-shrink-0 bg-dark overflow-auto" style="width: fit-content; min-width: 40px;">
  <!-- 内部内容保持不变 -->
</div>

这里min-width:40px是为了保证内容的最小宽度，避免容器被压缩得太窄。

修改后的完整示例代码 #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex overflow-hidden" style="max-width:200px; max-height:200px;">
  <div class="d-flex flex-column flex-fill bg-warning overflow-hidden">
    <div class="d-flex flex-fill bg-success"></div>
    <div class="d-flex flex-shrink-0 overflow-auto">
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
      <div class="p-2 border border-light text-light" style="width: 40px; height:40px;">abc</div>
    </div>
  </div>
  <!-- 使用scrollbar-gutter优化后的垂直滚动容器 -->
  <div class="d-flex flex-column flex-shrink-0 bg-dark overflow-auto" style="scrollbar-gutter: stable;">
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
    <div class="p-2 border border-light text-light" style="width: 40px;">abc</div>
  </div>
</div>

修改后，垂直滚动容器的滚动条会有专属的预留空间，不会再挤压内部内容，和水平滚动容器的表现保持一致，同时兼顾了现代浏览器和旧浏览器的兼容需求。

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