React滚动与溢出问题：为何整个应用可滚动而非仅目标Div

数据老陈

2026-7-10

问题分析与解决方案

问题根源

你的布局异常源于Flexbox默认行为和高度设置的冲突：

.app-container 是 flex-direction: column 容器，设置了 height: 100vh，但子元素 .main 使用 height: 100% 会让它的高度等于容器的100vh，加上 .header 的50px，整体高度超过100vh，触发页面全局滚动。
Flexbox默认给子元素设置 flex-shrink: 1，当容器内总高度超出100vh时，.header 会被压缩来腾出空间，这就是Header缩小的原因。
同时 .main-page 开启了 overflow-y: auto，内容过长时会出现自身滚动条，最终形成双滚动条异常。

修复方案

调整CSS的3个关键设置即可解决问题：

给 .main 设置 flex: 1 替代 height: 100%，让它自动占据 .header 之外的剩余空间，避免高度溢出。
给 .header 添加 flex-shrink: 0，强制保持固定高度，不会被Flexbox压缩。
重置 html 和 body 的默认边距，禁止页面全局滚动，避免浏览器默认样式干扰布局。

修改后的完整CSS代码：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.app-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  height: 50px;
  width: 100%;
  background-color: green;
  flex-shrink: 0;
}

.main {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 30px;
  height: 100%;
  background-color: red;
  flex-shrink: 0;
}

.main-page {
  flex: 1;
  background-color: #0000ff;
  overflow-y: auto;
}

.doc {
  height: 4rem;
  color: white;
}