CSS如何实现并排div一侧固定无滚动、另一侧正常滚动？

核心实现逻辑 #

用弹性布局/网格布局做外层双栏容器，通过控制容器和子元素的溢出属性，把滚动行为限制在单独的栏内，避免整页滚动：

• 外层容器占满目标高度（整屏场景就占满视口高度），隐藏自身溢出，杜绝整页出现多余滚动条
• 固定栏设置固定宽度、禁止收缩，溢出内容隐藏，全程保持位置不动
• 可滚动栏占满剩余宽度，开启垂直方向溢出滚动，仅该区域内容触发滚动

完整代码示例 #

HTML结构 #

<div class="two-column-wrap">
  <!-- 固定无滚动栏 -->
  <div class="fixed-side">
    固定栏内容，位置全程不动，内容超出也不会出现滚动条
  </div>
  <!-- 可滚动栏 -->
  <div class="scroll-side">
    可滚动区域内容，内容高度超出容器时会自动出现垂直滚动条
    <!-- 可填充长内容测试滚动效果 -->
  </div>
</div>

CSS样式（Flex方案，兼容性最佳） #

/* 重置浏览器默认边距，避免布局偏移 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.two-column-wrap {
  display: flex;
  width: 100%;
  height: 100vh; /* 整屏分栏就用100vh，非整屏场景替换为实际需要的固定高度即可 */
  overflow: hidden;
}

.fixed-side {
  width: 300px; /* 按需求修改固定栏宽度 */
  flex-shrink: 0; /* 核心属性：禁止固定栏被压缩宽度 */
  height: 100%;
  overflow: hidden;
  background: #f0f2f5;
}

.scroll-side {
  flex: 1; /* 自动填充剩余宽度 */
  height: 100%;
  overflow-y: auto; /* 仅垂直方向超出时显示滚动条 */
  padding: 20px;
}

备选Grid方案 #

如果偏好网格布局，只需要替换外层容器的CSS即可，子元素样式和Flex方案完全一致：

.two-column-wrap {
  display: grid;
  grid-template-columns: 300px 1fr; /* 第一栏固定宽度，第二栏自适应 */
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

注意：如果你的需求不是整屏分栏，而是固定栏在页面滚动时保持在视口内不动，可以给固定栏添加position: sticky; top: 0;属性，搭配普通文档流布局实现即可，这种场景下外层容器不能设置overflow: hidden，否则sticky定位会失效。

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