如何在不设置固定高度的前提下防止子元素溢出父容器

核心思路是用Flexbox垂直布局让容器自动分配空间，让表格所在区域独占剩余可用空间，同时给表格容器添加滚动属性。具体实现如下：

1. 给<my-component>设置基础Flex布局 #

确保父容器能充分利用可用空间，并且垂直排列子元素：

my-component {
  display: flex;
  flex-direction: column;
  height: 100%; /* 继承父组件的可用高度，避免自身被内容撑大 */
  overflow: hidden; /* 防止整体溢出 */
}

2. 让<the-problem-child>占据剩余空间 #

给这个子组件设置flex: 1，这样它会自动填充头部、按钮组和页脚之外的所有空间：

the-problem-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 限制内部内容溢出 */
}

3. 给表格容器添加滚动属性 #

在<the-problem-child>内部，把表格放到一个单独的容器里，让这个容器占满组件的剩余空间，并开启垂直滚动：
修改模板结构：

<the-problem-child>
  <div class="table-container">
    <table>I contain a table</table>
  </div>
  <div>I contain some buttons</div>
</the-problem-child>

添加对应CSS：

.table-container {
  flex: 1;
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
}

关键说明 #

• height: 100%：确保<my-component>继承父级的可用高度，而不是被内容撑开，这是嵌套场景下的核心前提。
• flex: 1：让中间区域自动填充剩余空间，避免整体容器被表格内容撑爆。
• overflow-y: auto：仅在表格内容超出容器高度时显示滚动条，不影响其他元素的可见性。

这样设置后，头部、按钮组、页脚会始终保持可见，表格区域会根据可用空间自动调整高度，内容过多时内部滚动，完全适配嵌套场景，不需要固定高度或vh单位。

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