如何实现占满屏幕的Flex布局并让侧边栏内容超出时自身滚动

我来帮你搞定这个全屏Flex布局的滚动问题～你的整体布局思路是对的，但问题出在没给侧边栏和内容区域设置高度约束和滚动规则，导致内容溢出时直接撑大了整个页面。下面是具体的修复方案：

核心修改点 #

• 给承载侧边栏和主内容的.row-wrapper添加overflow: hidden，确保它的子元素不会突破它的高度（它的高度由外层.wrapper的Flex布局固定，占满屏幕除footer外的空间）
• 给.side设置固定宽度（比如200px）、height: 100%和overflow-y: auto，让它的高度被父容器限制，内容溢出时仅自身滚动
• 给.content添加overflow-y: auto，确保主内容过多时也能独立滚动

修改后的完整代码 #

CSS部分

html, body { 
  width: 100%; 
  height: 100%; 
  margin: 0; 
  padding: 0; 
  border: 0; 
  overflow: hidden; /* 彻底禁用页面整体滚动 */
}
.wrapper { 
  width: 100%; 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
}
.side { 
  flex: 0 0 200px; /* 固定侧边栏宽度，不随页面伸缩 */
  background-color: lime; 
  height: 100%; 
  overflow-y: auto; /* 内容溢出时触发垂直滚动 */
}
.row-wrapper { 
  flex-grow: 1; 
  display: flex; 
  background-color: orange; 
  flex-direction: row; 
  overflow: hidden; /* 限制子元素高度，防止撑破父容器 */
}
.footer { 
  height: 40px; 
  background-color: purple; 
}
.col-wrapper { 
  flex-grow: 1; 
  display: flex; 
  flex-direction: column; 
  background-color: lightgreen; 
  height: 100%; /* 占满父容器高度 */
}
.header { 
  background-color: yellow; 
}
.content { 
  flex-grow: 1; 
  background-color: gold; 
  overflow-y: auto; /* 主内容溢出时触发垂直滚动 */
}

HTML部分（原结构无需修改）

<div class="wrapper">
  <div class="row-wrapper">
    <div class="side">
      side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>
    </div>
    <div class="col-wrapper">
      <div class="header"> header </div>
      <div class="content"> content </div>
    </div>
  </div>
  <div class="footer"> footer </div>
</div>

效果说明 #

现在侧边栏内容超过屏幕高度时，只会在侧边栏内部出现滚动条，主内容区域同理，整个页面不会再出现滚动条，完美实现了全屏固定布局+局部滚动的需求。

内容的提问来源于stack exchange，提问作者Fabio C.