如何在无固定高度的flex容器中实现垂直滚动表格

我用Flex实现了一个包含header、footer和中间content的布局：当页面内容较矮时，footer固定在视口底部；内容较长时，footer会被推到视口之外。现在需要实现content内的表格填满该区域，表格内容溢出时可垂直滚动，且滚动时不会把footer挤出视口。之前尝试设置固定max-height能实现，但父容器用了min-height:100vh，不知道怎么适配这种情况。

核心解决方案 #

关键是让content区域成为嵌套的Flex容器，通过内部Flex分配空间限制表格的可用高度，避免表格撑大content导致footer移位。同时优化表格结构，保证表头固定、滚动区域正常工作。

完整代码示例 #

HTML

<body>
  <div class="main-container">
    <div class="header">Header</div>
    <div class="content">
      <table class="table">
        <thead>
          <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
          </tr>
        </thead>
        <tbody>
          <!-- 可添加任意多行数据 -->
          <tr><td>内容行</td><td>内容行</td><td>内容行</td></tr>
          <tr><td>内容行</td><td>内容行</td><td>内容行</td></tr>
          <tr><td>内容行</td><td>内容行</td><td>内容行</td></tr>
          <!-- 重复上述行模拟大量数据 -->
        </tbody>
      </table>
    </div>
    <div class="footer">Footer</div>
  </div>
</body>

CSS

/* 全局重置默认边距 */
body {
  margin: 0;
}

.main-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: lightgreen;
  height: 50px;
}

.footer {
  background-color: lightcoral;
  height: 50px;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 阻止表格溢出时撑大父容器 */
}

.table {
  flex: 1;
  width: 100%;
  border-collapse: collapse;
}

/* 固定表头，仅tbody滚动 */
.table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.table tbody {
  display: block;
  max-height: 100%;
  overflow-y: auto;
}

.table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* 可选：添加表格边框增强可读性 */
.table th, .table td {
  border: 1px solid #ddd;
  padding: 8px;
}

方案说明 #

1. 外层Flex布局：main-container通过min-height:100vh保证布局至少占满视口，flex-direction:column让header、content、footer垂直排列，flex:1让content占据header和footer之外的所有剩余空间。
2. 内层Flex容器：content设置为Flex容器，确保表格能填充自身的可用高度，overflow:hidden避免表格溢出时撑大content，防止footer被挤出视口。
3. 表格滚动优化：将thead和tbody分离设置display，实现表头固定、tbody单独滚动；table-layout:fixed保证列宽一致，避免滚动时列错位。

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