如何用CSS Overflow在不同div中实现独立的X、Y滚动条

针对你遇到的滚动条显示异常、布局尺寸错乱，以及固定头尾与中间滚动区域兼容的问题，可以通过以下布局调整解决：

核心布局思路 #

用垂直flex布局固定header和footer，让中间滚动区域自动填充剩余空间；内部两个div单独设置X轴滚动，Y轴随中间容器整体滚动。

具体代码调整 #

1. 先给根元素和body设置基础布局，确保页面占满视口：

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

2. 固定header和footer，不让它们被压缩或拉伸：

.header, .footer {
  flex-shrink: 0;
  height: 60px; /* 根据需求调整高度 */
  padding: 0 16px;
  background: #f5f5f5;
}

3. 设置中间滚动容器，实现Y轴滚动：

.middle-scroll-container {
  flex-grow: 1; /* 占满header和footer之外的剩余高度 */
  overflow-y: auto; /* 内容超出时显示Y轴滚动条 */
  padding: 12px;
  box-sizing: border-box; /* 避免padding撑大容器 */
}

4. 给内部两个div设置独立X轴滚动：

.inner-scroll-div {
  overflow-x: scroll; /* 仅X轴滚动 */
  overflow-y: visible; /* Y轴随中间容器滚动，不单独出现滚动条 */
  margin-bottom: 16px;
  min-height: 200px; /* 保证div基础高度 */
}

/* 内部宽内容示例，用于触发X轴滚动 */
.inner-content {
  width: 1400px; /* 超出容器宽度即可 */
  height: 180px;
  background: #e0e0e0;
}

关键注意事项 #

• 必须给中间容器设置明确的可用高度：通过flex-grow:1让它自动填充剩余空间，替代固定像素高度，解决缩放时的适配问题
• 所有元素添加box-sizing: border-box，避免padding或border破坏容器尺寸，导致滚动条不显示
• 内部div不要设置overflow-y，否则会和中间容器的Y滚动冲突，导致布局错乱
• 若需要响应式适配，可将内部内容的宽度改为相对单位（如vw），避免固定像素在缩放时出现异常

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