Angular Material Table Height with Flex layout and FlexFill

Question

How to set material table height to flex layouts fill height. the below code snippet doesn't respect fxFill and overflow's the size of the fxFill and the height is set based on number of rows. How do we set the table height to flex fill height and add scroll to table body.

<div fxLayout="column" fxFill class="mat-elevation-z4" fxLayoutAlign="start stretch" fxLayoutGap="2px">
  <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="padding: 8px">
    <mat-form-field>
      <mat-label>Search User</mat-label>
      <input matInput (keyup)="applyFilter($event)" placeholder="Ex. username" #input />
    </mat-form-field>
    <div fxFlex fxFill></div>
    <button mat-mini-fab (click)="add()" matTooltip="Add new user" matTooltipPosition="after">
      <mat-icon>add</mat-icon>
    </button>
  </div>
  <div fxFlex fxFlexFill>
    <div fxLayout="column" fxLayoutAlign="start stretch" fxFlexFill>
      <table fxFlex fxFlexFill mat-table [dataSource]="dataSource" matSort style="width: 100%">
        <ng-container matColumnDef="username">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Username</th>
          <td mat-cell *matCellDef="let row">{{ row.username }}</td>
        </ng-container>

        <ng-container matColumnDef="firstName">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th>
          <td mat-cell *matCellDef="let row">{{ row.firstName }}</td>
        </ng-container>

        <ng-container matColumnDef="lastName">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>
          <td mat-cell *matCellDef="let row">{{ row.lastName }}</td>
        </ng-container>

        <ng-container matColumnDef="email">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
          <td mat-cell *matCellDef="let row">{{ row.email }}</td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

        <!-- Row shown when there is no matching data. -->
        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" colspan="4">No data matching the filter {{ input.value }}</td>
        </tr>
      </table>
    </div>
    <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]"></mat-paginator>
  </div>
</div>