如何让Flex元素超出overflow-scroll容器范围？

问题重现 #

你的布局里，.bottom作为带垂直滚动的Flex容器，内部侧边栏（.sidebar）被截断，无法随内容撑开高度，只能局限在容器的可视范围。原始代码如下：

CSS代码 #

* {
  margin: 0;
}

.container {
  height: 400px;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%
}

.top {
  height: 48px;
  background-color: blue;
}

.bottom {
  flex: 1;
  display: flex;
  overflow-y: scroll;
}

.main {
  display: flex;
  flex: 1;
  background: green;
  position: relative;
  align-items: stretch;
}

.sidebar {
  width: 100px;
  background-color: yellow;
  border: 1px solid orange;
  min-height: 100%;
}

.sidebar-item {
  height: 300px;
  border: 1px solid purple;
}

.flex-item {
  flex: 1;
  border: 1px solid red;
}

HTML代码 #

<div class="container">
  <div class="content">
    <div class="top"></div>
    <div class="bottom">
      <div class="sidebar">
        <div class="sidebar-item"></div>
        <div class="sidebar-item"></div>
        <div class="sidebar-item"></div>
      </div>
      <div class="main">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
      </div>
    </div>
  </div>
</div>

修复方案 #

问题核心是Flex容器默认的align-items: stretch会强制子元素拉伸至容器可视高度，再加上.sidebar的min-height: 100%限制，导致它无法随内容自然撑开。只需两处修改：

1. 给.bottom容器添加align-items: flex-start，取消子元素的强制拉伸
2. 移除.sidebar的min-height: 100%，让它随内容自动调整高度

修改后的CSS代码：

* {
  margin: 0;
}

.container {
  height: 400px;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%
}

.top {
  height: 48px;
  background-color: blue;
}

.bottom {
  flex: 1;
  display: flex;
  overflow-y: scroll;
  align-items: flex-start; /* 添加该行 */
}

.main {
  display: flex;
  flex: 1;
  background: green;
  position: relative;
  align-items: stretch;
}

.sidebar {
  width: 100px;
  background-color: yellow;
  border: 1px solid orange;
  /* 移除 min-height: 100%; */
}

.sidebar-item {
  height: 300px;
  border: 1px solid purple;
}

.flex-item {
  flex: 1;
  border: 1px solid red;
}

原理说明 #

• Flex容器默认的align-items: stretch会让子元素高度匹配容器交叉轴高度（此处为垂直方向），即使内容超出也会被限制在可视范围内。
• 设置align-items: flex-start后，子元素以自身内容高度为准，不再被强制拉伸，.sidebar就能随内部.sidebar-item的总高度自然撑开，超出.bottom的部分会触发滚动条。
• 移除min-height: 100%避免强制限制侧边栏高度，让它完全由内容决定高度。

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