Flex模式下阻止div被撑开，实现内部滚动条需求求助

要实现banner固定在顶部，下方内容区占满剩余视口高度且内部滚动，你需要调整父容器和子元素的flex布局约束，以下是可行的完整代码：

HTML结构（保持你的原有结构） #

<div id="mainDiv">
  <div id="banner">我是顶部banner，高度随内容自适应</div>
  <div id="expectedDivWithScrollBar">
    <table>
      <!-- 这里放高度很高的表格内容 -->
      <tr><td>表格内容</td></tr>
      <tr><td>表格内容</td></tr>
      <!-- 重复多行模拟高表格 -->
    </table>
  </div>
</div>

关键CSS代码 #

/* 清除默认边距，避免视口出现不必要的滚动 */
body {
  margin: 0;
}

/* 父容器设置为垂直flex布局，占满整个视口高度 */
#mainDiv {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* banner样式，高度由内容或自定义样式决定，无需固定 */
#banner {
  background-color: #f5f5f5;
  padding: 16px;
}

/* 核心：内容区占据剩余空间并实现内部滚动 */
#expectedDivWithScrollBar {
  flex: 1 1 auto; /* 强制占满banner下方的所有剩余空间 */
  min-height: 0; /* 关键属性：解除flex子元素的最小高度限制，否则内容会撑开容器 */
  overflow: auto; /* 内容超出时显示滚动条 */
  padding: 16px;
}

/* 表格适配容器宽度，避免横向溢出 */
#expectedDivWithScrollBar table {
  width: 100%;
  border-collapse: collapse;
}

#expectedDivWithScrollBar table td {
  padding: 8px;
  border: 1px solid #ddd;
}

为什么之前的设置无效？ #

在垂直方向的flex布局中，flex子元素的min-height默认值是auto，这意味着子元素的高度会被内部内容（比如你的高表格）撑开，导致overflow: auto无法触发。设置min-height: 0后，子元素的高度会被flex: 1强制限制在父容器的剩余空间内，内容超出时自然会出现滚动条。

整个方案完全不需要固定尺寸：banner高度由内容自适应，父容器占满视口，内容区自动填充剩余空间，完全符合动态适配的需求。

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