React表格组件Flex布局问题：避免内容撑开中间滚动区域

我正在React中开发一个表格组件，包含三个核心部分：顶部工具栏、底部分页栏和中间的表格数据区。需求是中间表格数据区要填满工具栏与分页栏之间的空间，当表格内容过多时，仅在该区域内部滚动。我用Flex布局实现，内容较少时显示正常（表格仅含3条数据，容器高度符合预期），但添加更多数据后，容器被内容撑开，需要滚动整个页面才能看到底部的分页栏。

复现代码如下：

React组件代码 #

export default function Example() {
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
return (<div className="root">
  <div className="tableHolder">
    <div className="header">toolbar</div>
      <div className="tableData">
        {items.map((item) => {
            return (
              <div className="item" key={item}>
                item
              </div>
            );
        })}
      </div>
      <div className="footer">pagination</div>
    </div>
  <div className="expectedSize" />
</div>)
}

样式代码 #

.root {
  display: flex;
}

.tableHolder {
  background-color: darkgray;
  width: 600px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.expectedSize {
  background-color: lightcoral;
  width: 20px;
  height: 400px;
}

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

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

.tableData {
  flex-grow: 1;
  overflow-y: auto;
}

.item {
  height: 60px;
  background-color: lightblue;
  margin: 10px;
}

请问除了设置元素max-height外，有没有更优的解决方案？

问题核心在于.tableHolder的min-height属性：当内部内容高度超过min-height设定值时，容器会被内容撑开，导致Flex布局的空间分配逻辑失效。要实现中间区域固定占满剩余空间且内部滚动，只需调整容器的高度约束，配合overflow: hidden确保容器尺寸稳定。

固定高度方案 #

直接将.tableHolder的min-height替换为固定height，同时添加overflow: hidden：

.tableHolder {
  background-color: darkgray;
  width: 600px;
  /* 替换min-height为固定高度 */
  height: 400px;
  display: flex;
  flex-direction: column;
  /* 阻止容器被内部内容撑开 */
  overflow: hidden;
}

自适应父容器方案 #

如果需要容器高度自适应父容器（比如占满视口剩余空间），可以给根级元素设置高度，让.tableHolder继承父容器高度：

/* 确保根元素占满视口高度 */
html, body {
  height: 100%;
  margin: 0;
}

.root {
  display: flex;
  height: 100%;
}

.tableHolder {
  background-color: darkgray;
  width: 600px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

修改后，.tableData会自动填充工具栏与分页栏之间的剩余空间，当内容过多时，仅在.tableData区域内部出现垂直滚动条，容器整体高度保持稳定，不会被内容撑开。

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