如何让Flexbox容器及溢出子元素保持在100%高度范围内？

好问题！仅用纯Flexbox完全可以实现你要的效果，不需要固定像素高度，也不用JavaScript。核心是给中间的可滚动区块内部也设置Flex布局，让内容区能正确继承父元素的可用高度。

完整代码实现 #

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body { 
      height: 100%; 
      margin: 0; 
    }
    #container { 
      width: 100%; 
      height: 100%; 
      background-color: gray; 
      display: flex; 
      flex-direction: column; 
    }
    #a, #c { 
      flex: 0 1 auto; 
      padding: 10px;
      background: #eee;
    }
    #b { 
      flex: 1 1 auto; /* 占据容器剩余所有空间 */
      display: flex; /* 内部也用Flex布局 */
      flex-direction: column;
      padding: 10px;
    }
    #b > div:first-child {
      flex: 0 1 auto; /* 标题只占自身高度 */
      margin-bottom: 8px;
      font-weight: bold;
    }
    #s2 { 
      flex: 1 1 auto; /* 填充#b的剩余空间 */
      overflow: auto; /* 内容超出时滚动 */
      background-color: lightblue;
      padding: 8px;
    }
  </style>
</head>
<body>
<div id="container">
  <div id="a"><div>Section 1</div></div>
  <div id="b">
    <div>Section 2</div>
    <div id="s2">
      <!-- 这里可以放任意多的Item -->
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
    </div>
  </div>
  <div id="c"><div>Section 3</div></div>
</div>
</body>
</html>

关键原理说明 #

• 根容器与外层Flex：html、body和#container都设置height:100%，确保整个布局占满视口高度。#container用flex-direction: column让三个区块垂直排列。
• 顶部/底部区块：#a和#c用flex: 0 1 auto，只会占用自身内容的高度，不会挤压中间区块。
• 中间区块的内部Flex：这是解决问题的核心！给#b设置display: flex和flex-direction: column，让它的子元素（标题和内容区）也按垂直Flex布局。
  • 标题部分flex:0 1 auto，只占自身高度；
  • 内容区#s2用flex:1 1 auto，会自动填充#b的剩余空间；同时overflow:auto保证当内容超出这个空间时，自动出现垂直滚动条，不会撑破整个容器。

效果验证 #

• 当内容较少时：#s2会收缩到内容高度，整个容器保持100%视口高度，Section 3始终在底部。
• 当内容较多时：#s2会占满#b的可用空间，超出部分滚动，Section 1和Section 3的位置不受影响，整体布局不会超出视口高度。

这个方案完美解决了你提到的“无固定高度时无法计算溢出阈值”的问题，完全基于Flexbox的特性实现，不需要额外的JavaScript或表格布局。

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