如何实现自适应高度的Angular Material表格与分页器组合

我们在项目中使用Angular Material的表格与分页器组件，遵循官方示例布局时一切正常，但父组件高度未知，无法设置固定的min-height和max-height。需求是：

• 分页器高度自适应（auto）
• 表格可伸缩，内容溢出时显示滚动条

当前采用的flex布局方案如下：

<div style="height: 100%; display: flex; flex-direction: column">
  <table mat-table style="flex: 1 1 0px"> ... </table>
  <mat-paginator style="flex: none"> ... </mat-paginator>
</div>

该方案在表格需要占满可用空间时表现正常，但无数据时表格仍会占用全部可用高度。另外，Angular 15引入的密度设置会影响分页器高度，无法通过calc(100% - $paginatorHeight)来设置表格的max-height，现寻求flexbox属性或其他样式方案，让表格仅根据内容高度成长。

可以通过调整flex属性结合滚动设置，同时优化容器层级来实现需求：

• 调整表格的flex属性
  把表格的flex属性从1 1 0px改为0 1 auto，同时添加overflow-y: auto，这样表格默认会跟随内容高度自适应，当父容器剩余空间不足时才会收缩并显示滚动条：

<div style="height: 100%; display: flex; flex-direction: column">
  <table mat-table style="flex: 0 1 auto; overflow-y: auto"> ... </table>
  <mat-paginator style="flex: none"> ... </mat-paginator>
</div>

• 嵌套容器优化滚动行为（推荐）
  如果直接给mat-table设置滚动不生效，可以在外层套一个容器，让容器承担flex伸缩和滚动职责，表格只负责渲染内容：

<div style="height: 100%; display: flex; flex-direction: column">
  <div style="flex: 1 1 auto; overflow-y: auto;">
    <table mat-table> ... </table>
  </div>
  <mat-paginator style="flex: none"> ... </mat-paginator>
</div>

这个方案下，无数据时容器会收缩到表格内容的高度，有大量数据时容器会占满父容器剩余空间，超出部分自动显示滚动条，完美适配分页器高度变化的场景。

• 可选：给表格添加最小高度兜底
  如果担心无数据时表格过于单薄，可以给表格设置一个基于表头高度的min-height，避免完全塌陷：

mat-table {
  min-height: 60px; /* 根据实际表头高度调整 */
}

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