移动端overflow-y破坏列布局的解决方案咨询

你的问题核心是绝对定位脱离文档流导致的：.custom-class用了position: absolute，但它的父容器没有设置相对定位，元素会脱离Bootstrap栅格的布局约束，在移动端屏幕较小时自然就溢出了。

直接给你可行的修复方案：

1. 修正定位关系 #

给包含.custom-class的父容器（也就是col-sm-5 p-0）加上position: relative，让绝对定位的子元素以这个父容器为基准，不会乱跑。

2. 约束滚动容器的尺寸 #

给.custom-class加上width: 100%，确保它的宽度不超出父容器；同时可以把固定高度改成响应式的，比如用vh（视口高度）或者媒体查询适配移动端，避免固定350px在小屏幕上过高。

3. 简化冗余的栅格嵌套 #

你代码里.custom-class外面套了一层col-md-12，这在Bootstrap栅格里是冗余的，直接去掉能减少布局层级，避免潜在冲突。

修改后的代码： #

CSS部分

.custom-class {
  position: absolute;
  overflow-y: auto;
  height: 70vh; /* 用视口高度替代固定值，适配不同屏幕 */
  width: 100%; /* 强制宽度继承父容器 */
  -webkit-overflow-scrolling: touch;
}

/* 给父容器加相对定位 */
.scroll-container {
  position: relative;
}

HTML部分

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-xl-12">
    <section class="py-5 header">
      <div class="container py-4">
        <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-9">
            <div class="tab-content">
              <div class="col-md-12">
                <div class="row">
                  <div class="col-sm-7"></div>
                  <!-- 添加自定义类作为滚动容器的父级 -->
                  <div class="col-sm-5 p-0 scroll-container">
                    <div class="custom-class"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

额外提示 #

如果不想用绝对定位，也可以换成相对定位，这样元素不会脱离文档流，父容器会自动适应它的高度，只需要设置max-height和overflow-y: auto，代码更简洁：

.custom-class {
  position: relative;
  overflow-y: auto;
  max-height: 70vh;
  -webkit-overflow-scrolling: touch;
}

这种方式更符合Bootstrap的布局逻辑，推荐优先尝试。

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