如何让Flexbox中的嵌套单元格实现overflow:scroll滚动效果？

我已查阅Stack Overflow上所有类似问题，但均未解决此特定场景。

我希望白色div在内容溢出时可滚动，其余部分保持固定，请问不使用固定像素高度的最简单实现方法是什么？

现有代码 #

HTML #

<div class="container">
  <div class="top">Top area</div>
  <div class="bottom">
    <div class="left">
      <div class="filters">Filters</div>
      <div class="scrollContainer">
        <ul class="item">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>0</li>
        </ul>
      </div>
    </div>
    <div class="main">Main area</div>
  </div>
</div>

CSS #

body {
  height: 100%;
  margin: 0;
  
  background-color: #F5F5F5;
  overflow: hidden;
}

.top {
  height: 150px;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  
  background-color: #594255;
  overflow: hidden;
}

.bottom {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

.left {
  overflow: hidden;
}

.scrollContainer {
  overflow: scroll;
}

.item {
  margin: 1px;
  
  background-color: #fff;
  
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 3em;
  color: #594255;
   
  flex: 1;
}

ul {
  list-style-type: none;
}

核心是利用Flexbox的空间分配特性，让左侧容器也采用垂直Flex布局，让滚动容器自动占据剩余空间，内容溢出时触发滚动。

修改后的关键CSS代码 #

/* 让left容器垂直排列子元素 */
.left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 滚动容器占据left容器剩余空间，内容溢出时显示滚动条 */
.scrollContainer {
  overflow: auto;
  flex: 1;
}

/* bottom容器改为flex:1，替代height:100%，避免高度溢出 */
.bottom {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
}

/* body改用100vh确保占满视口高度 */
body {
  height: 100vh;
  margin: 0;
  
  background-color: #F5F5F5;
  overflow: hidden;
}

/* 移除ul默认内边距，优化布局 */
ul {
  list-style-type: none;
  padding: 0;
}

完整修改后的CSS #

body {
  height: 100vh;
  margin: 0;
  
  background-color: #F5F5F5;
  overflow: hidden;
}

.top {
  height: 150px;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  
  background-color: #594255;
  overflow: hidden;
}

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

.left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scrollContainer {
  overflow: auto;
  flex: 1;
}

.item {
  margin: 1px;
  
  background-color: #fff;
  
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 3em;
  color: #594255;
}

ul {
  list-style-type: none;
  padding: 0;
}

说明 #

1. 给left容器设置垂直Flex布局，让filters和scrollContainer垂直排列，scrollContainer通过flex:1自动获取剩余垂直空间。
2. 将bottom的height:100%改为flex:1，确保它在container的垂直布局中占据除top外的剩余空间，避免高度溢出。
3. body改用100vh确保容器能正确继承视口高度，避免因父级高度未明确导致的布局失效。
4. 移除ul的默认内边距，避免列表内容偏移。

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