Angular问题：设置p-table的scrollHeight为flex时滚动条不显示

问题重现 #

将PrimeNG p-table的scrollHeight设为flex时滚动条无法显示，但设置固定值（如400px）时正常。当前HTML结构如下：

<mat-drawer-container>
 <mat-drawer-content [style]="'overflow: hidden'">
  <mat-card [style]="'overflow: hidden'">
   <mat-card-content [style]="'overflow: auto'">
    <p-table [value]="dataSource.data" [scrollable]='true' scrollHeight="flex">
     ...
    </p-table>
   </mat-card-content>
  </mat-card>
 </mat-drawer-content>
</mat-drawer-container>

问题原因 #

scrollHeight="flex"模式下，p-table需要父级容器提供明确的高度约束才能计算可滚动空间。但当前结构中：

• mat-drawer-container未设置高度，导致整个容器没有明确的尺寸基准
• 上层的mat-drawer-content和mat-card都设置了overflow: hidden，且未配置flex布局传递高度
• mat-card-content虽设了overflow: auto，但没有足够高度空间触发滚动

解决方案 #

调整容器的高度和布局设置，让p-table能获取到可用高度：

1. 给mat-drawer-container设置基础高度（比如占满视口）：

mat-drawer-container {
  height: 100vh;
}

2. 修改上层容器布局，让mat-card-content自动填充剩余空间：

<mat-drawer-container style="height: 100vh;">
  <mat-drawer-content>
    <mat-card style="height: 100%; display: flex; flex-direction: column;">
      <mat-card-content style="flex: 1; overflow: auto;">
        <p-table [value]="dataSource.data" [scrollable]='true' scrollHeight="flex">
          ...
        </p-table>
      </mat-card-content>
    </mat-card>
  </mat-drawer-content>
</mat-drawer-container>

原理说明 #

• mat-drawer-container设为100vh后，整个容器有了明确的视口高度基准
• mat-card通过display: flex和flex-direction: column，让子元素按垂直方向分配空间
• mat-card-content的flex: 1会自动填充mat-card的剩余高度，此时p-table的scrollHeight="flex"就能基于这个高度计算，内容超出时自动显示滚动条

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