How do I properly set the height of a PrimeNG table so it fits its container?

I am working on an Angular 19 app using Primeng.

I am trying to implement a dashboard, and I am using a css grid layout.

<div class="grid grid-cols-12 gap-5">
<!-- First row -->

<!-- Second row -->

<!-- Third row -->

<!-- Fourth row -->
<div class="col-span-4">
<app-tickets-status-stats-box [ticketsStatusData]="ticketsStatusData" />
</div>
<div class=col-span-4">
<app-table-box />
</div>
<div class="col-span-4">
<app-table-box />
</div>
</div>


The issue is with the <app-table-box /> component; it looks like this:

<div class="h-full max-h-full border rounded-md shadow">
<div class="w-full py-2 border-b rounded-t-md">
<h3 class="text-lg font-semibold text-center">TICKETS TAT</h3>
</div>
<div class="class="max-h-[calc(100%-40px)]"">
<p-table [value]="data" [size]="'small'" [scrollable]="true" scrollHeight="flex">
<ng-template #header>
<tr>
<th>Application</th>
<th>Target</th>
<th>Actual</th>
</tr>
</ng-template>
<ng-template #body let-dataElement>
<tr>
<td>
<p class="font-medium">{{ dataElement.application }}</p>
</td>
<td>{{ dataElement.target }}</td>
<td>{{ dataElement.actual }}</td>
</tr>
</ng-template>
</p-table>
</div>
</div>


This is how my layout looks:

I want the 2 boxes to be the same height as the first box; If i comment out the table, then the cards' heights will match the ones of the first element.

I am using [scrollable]=true and scrollHeight="flex" for the table to take up all the available space, and class="max-h-[calc(100%-40px)]" on the parent of the table so the max height is the one of the card minus the header.

What am I doing wrong?

Continue reading...