如何避免Flex项目溢出容器？含头部+侧边栏滚动布局问题

你的核心需求是实现Header自适应高度、侧边栏固定、主内容区域单独滚动的布局，当前代码的问题在于主内容过多时会撑大容器，导致整个页面滚动。只需对CSS做一处修改即可解决：

修复后的完整代码 #

CSS #

body {
  margin: 0;
}

.fx-a {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  background: red;
}

.fx-b {
  flex-grow: 1;
  display: flex;
  overflow: hidden; /* 新增关键属性 */
}

.aside {
  background: yellow;
  flex: 1;
}

.main {
  background: blue;
  flex: 3;
  overflow-y: scroll;
}

.test {
  margin-top: 100px;
}

HTML #

<div class="fx-a">
  <header class="header">
    <h2>Title</h2>
  </header>
  <div class="fx-b">
    <aside class="aside"></aside>
    <main class="main">
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <div class="test">a</div>
      <!-- 可继续添加内容测试滚动效果 -->
    </main>
  </div>
</div>

修改说明 #

• 给.fx-b添加overflow: hidden是核心解决点：原代码中.fx-a设置了height: 100vh，但flex容器默认允许子元素（.fx-b）因内部内容过多被撑大，导致整个页面超出视口。添加该属性后，.fx-b会严格保持在父容器分配的剩余高度内，内部超出的内容会被裁剪。
• .main的overflow-y: scroll会让自身内容在限定高度内纵向滚动，Header和Aside的位置保持固定，不会随滚动移动。

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