Bootstrap 5 overflow-auto类导致滚动内容顶部截断的问题排查与解决

问题场景 #

使用Bootstrap类构建的容器中，内部文本顶部被截断：

<div class="align-items-center d-flex justify-content-center mb-3 overflow-auto" style="background-color: red; height: 5rem">
  <figure class="mb-0" style="background-color: orange">
    <div class="d-flex justify-content-center text-center" style="background-color: yellow">
      Hickory dickory dock.<br>
      The mouse ran up the clock.<br>
      The clock struck one,<br>
      The mouse ran down,<br>
      Hickory dickory dock.
    </div>
  </figure>
</div>

将Bootstrap类转为内联样式后，内容顶部未被截断：

<div style="align-items: center; background-color: red; display: flex; height: 5rem; justify-content: center; margin-bottom: 1rem; overflow: auto">
  <figure style="background-color: orange; margin-bottom: 0">
    <div style="background-color: yellow; display: flex; justify-content: center; text-align: center">
      Hickory dickory dock.<br>
      The mouse ran up the clock.<br>
      The clock struck one,<br>
      The mouse ran down,<br>
      Hickory dickory dock.
    </div>
  </figure>
</div>

1. 现象原因 #

核心原因是Bootstrap的align-items-center类为Flex容器设置了垂直居中对齐：当容器有固定高度且子元素高度超过容器时，Flex布局会将子元素在容器内垂直居中，导致子元素顶部超出容器可视区域。而容器的overflow: auto生成滚动条后，浏览器初始会让视口对准子元素的居中位置，因此顶部内容被隐藏，看起来像是被截断。

内联样式的写法中未出现该问题，大概率是因为转换时无意中规避了Bootstrap类带来的垂直居中逻辑，或是缺少了某些全局样式的隐性影响，导致子元素默认垂直顶端对齐。

2. 保留Bootstrap类的解决方案 #

根据需求不同，有以下几种可行方案：

方案一：修改容器垂直对齐方式 #

移除align-items-center类，改用align-items-start，让子元素垂直顶端对齐，同时保留水平居中：

<div class="d-flex justify-content-center mb-3 overflow-auto align-items-start" style="background-color: red; height: 5rem">
  <figure class="mb-0" style="background-color: orange">
    <div class="d-flex justify-content-center text-center" style="background-color: yellow">
      Hickory dickory dock.<br>
      The mouse ran up the clock.<br>
      The clock struck one,<br>
      The mouse ran down,<br>
      Hickory dickory dock.
    </div>
  </figure>
</div>

方案二：单独调整子元素对齐 #

保留容器的align-items-center类，给内部figure元素添加align-self-start类，覆盖容器的垂直居中设置：

<div class="align-items-center d-flex justify-content-center mb-3 overflow-auto" style="background-color: red; height: 5rem">
  <figure class="mb-0 align-self-start" style="background-color: orange">
    <div class="d-flex justify-content-center text-center" style="background-color: yellow">
      Hickory dickory dock.<br>
      The mouse ran up the clock.<br>
      The clock struck one,<br>
      The mouse ran down,<br>
      Hickory dickory dock.
    </div>
  </figure>
</div>

方案三：JS强制设置初始滚动位置 #

如果必须保留垂直居中效果，可通过JavaScript强制将容器滚动到顶部：

document.querySelector('.overflow-auto').scrollTop = 0;

若需同时处理横向滚动，再添加scrollLeft = 0即可满足"横竖方向均超出时默认滚动到左上"的需求。

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