Как сделать так, чтобы angular материал mat-tab прокручивался вертикально, когда внутри холст?

Question

Итак, у меня есть angular вкладка материала HTML:

<mat-card class="mat-elevation-z0">
  <mat-card-header class="justify-content-between">
    <mat-card-title>
      <h3><i class="fas fa-archive"></i>Packages Dashboard</h3>
    </mat-card-title>
    <button mat-raised-button color="primary" type="button" style="margin-bottom: 5px;" (click)="addNew()">Create New</button>
  </mat-card-header>
  <mat-divider></mat-divider>
  <mat-card-content>
    <br />
    <div class="package-form-container mat-elevation-z3">
      <form [formGroup]="packageForm">
        <div fxLayout="column" fxLayoutGap="5px">
          <div fxLayout="row">
            <mat-icon>note_add</mat-icon>
            <h5>Quick Package Registration</h5>
          </div>
          <div fxLayout="row" fxLayoutGap="5px">
            <div fxFlex="0 0 25%">
              <mat-form-field appearance="outline">
                <mat-label>Tracking Number</mat-label>
                <input matInput formControlName="trackingNumber" />
              </mat-form-field>
            </div>
            <div fxFlex="0 0 25%">
              <mat-form-field appearance="outline">
                <mat-label>Customer</mat-label>
                <input matInput [matAutocomplete]="customerAuto" formControlName="customer" />
                <mat-autocomplete #customerAuto="matAutocomplete" [displayWith]="displayFn">
                  <mat-option *ngFor="let option of filteredCustomers | async" [value]="option">
                    {{option.fullName}}
                  </mat-option>
                </mat-autocomplete>
                <mat-icon matSuffix style="color: grey">arrow_drop_down</mat-icon>
              </mat-form-field>
            </div>
            <button mat-raised-button color="accent" type="button" (click)="quickRegistration()">Add Package</button>
          </div>
        </div>
      </form>
    </div>

    <mat-tab-group>
      <!--#region package list-->
      <mat-tab label="Packages List">
        <div fxLayout="row" fxLayoutGap="5px" fxLayouAlign="space-between">
          <div fxFlex="0 0 50%" fxLayoutAlign="start center">
            <mat-form-field appearance="outline">
              <mat-label>Filter</mat-label>
              <mat-icon matSuffix>search</mat-icon>
              <input matInput (keyup)="applyFilter($event)" />
            </mat-form-field>
          </div>
          <div fxFlex="0 0 50%">
            <mat-paginator [pageSizeOptions]="[10,20,50,100]"></mat-paginator>
          </div>
        </div>
        <div class="table-container">
          <table mat-table [dataSource]="dataSource">
            <ng-container matColumnDef="number">
              <th mat-header-cell *matHeaderCellDef style="width: 4%">No.</th>
              <td mat-cell *matCellDef="let row; let i=index" style="width: 4%;">{{i+1}}</td>
            </ng-container>

            <ng-container matColumnDef="trackingNumber">
              <th mat-header-cell *matHeaderCellDef style="width: 20%">Tracking Number</th>
              <td mat-cell *matCellDef="let row" style="width: 20%; text-align: left">
                <div style="padding-left: 5px">
                  {{row.trackingNumber}}
                </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="trackingState">
              <th mat-header-cell *matHeaderCellDef style="width: 20%">Tracking State</th>
              <td mat-cell *matCellDef="let row" style="width: 20%; text-align: left">
                <div style="padding-left: 5px">
                  {{ getLastState(row) | toDisplayName: 'trackingStates'}}
                </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="height">
              <th mat-header-cell *matHeaderCellDef style="width: 5%">Height</th>
              <td mat-cell *matCellDef="let row" style="width: 5%; text-align: right">
                <div style="padding-right: 5px">
                  {{row.height}}
                </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="width">
              <th mat-header-cell *matHeaderCellDef style="width: 5%">Width</th>
              <td mat-cell *matCellDef="let row" style="width: 5%; text-align: right">
                <div style="padding-right: 5px">
                  {{row.width}}
                </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="length">
              <th mat-header-cell *matHeaderCellDef style="width: 5%">Length</th>
              <td mat-cell *matCellDef="let row" style="width: 5%; text-align: right">
                <div style="padding-right: 5px">{{row.length}}</div>
              </td>
            </ng-container>

            <ng-container matColumnDef="weight">
              <th mat-header-cell *matHeaderCellDef style="width: 5%">Weight</th>
              <td mat-cell *matCellDef="let row" style="width: 5%; text-align: right">
                <div style="padding-right: 5px">{{row.weight}}</div>
              </td>
            </ng-container>

            <ng-container matColumnDef="dateTimeReceived">
              <th mat-header-cell *matHeaderCellDef style="width: 10%">Date Received</th>
              <td mat-cell *matCellDef="let row" style="width: 10%; text-align: left">
                <div style="padding-left: 5px">{{row.dateTimeReceived | date: 'dd-MM-yyyy'}}</div>
              </td>
            </ng-container>

            <ng-container matColumnDef="customer">
              <th mat-header-cell *matHeaderCellDef style="width: 16%">Customer</th>
              <td mat-cell *matCellDef="let row" style="width: 16%; text-align: left">
                <div style="padding-left: 5px">{{row.customer?.fullName}}</div>
              </td>
            </ng-container>

            <ng-container matColumnDef="actions">
              <th mat-header-cell *matHeaderCellDef>Actions</th>
              <td mat-cell *matCellDef="let row">
                <button mat-icon-button matToolTip="view details" type="button" (click)="goToDetails(row)">
                  <mat-icon>reorder</mat-icon>
                </button>
                <button mat-icon-button matTooltip="edit record" color="accent" type="button" (click)="editPackage(row)">
                  <mat-icon>edit</mat-icon>
                </button>
                <button mat-icon-button color="warn" matTooltip="delete record" type="button" (click)="deletePackage(row)">
                  <mat-icon>delete</mat-icon>
                </button>
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>
        </div>
      </mat-tab>
      <!--#endregion-->
      <!--#region Charts-->
      <mat-tab label="Charts">
          <form [formGroup]="filterForm">
            <div fxLayout="row" fxLayoutGap="5px">
              <div fxFlex="0 0 25%">
                <mat-form-field appearance="outline">
                  <mat-label>Date From</mat-label>
                  <input matInput [matDatepicker]="dateFrom" formControlName="startDate" />
                  <mat-datepicker-toggle matSuffix [for]="dateFrom"></mat-datepicker-toggle>
                  <mat-datepicker #dateFrom></mat-datepicker>
                </mat-form-field>
              </div>
              <div fxFlex="0 0 25%">
                <mat-form-field appearance="outline">
                  <mat-label>Date To</mat-label>
                  <input matInput [matDatepicker]="dateTo" formControlName="endDate" />
                  <mat-datepicker-toggle matSuffix [for]="dateTo"></mat-datepicker-toggle>
                  <mat-datepicker #dateTo></mat-datepicker>
                </mat-form-field>
              </div>
              <div fxFlex="0 0 25%">
                <mat-form-field appearance="outline">
                  <mat-label>Tracking State</mat-label>
                  <mat-select formControlName="trackingState">
                    <mat-option *ngFor="let option of trackingStates" [value]="option.value">
                      {{option.display}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
              <div fxFlex="0 0 25%" fxLayoutAlign="start center" fxLayoutGap="5px">
                <button mat-raised-button color="primary" style="width: 50%">Filter</button>
                <button mat-stroked-button color="primary" style="width: 40%">Clear</button>
              </div>
            </div>
          </form>
          <div fxLayout="row" fxLayoutGap="5" fxLayoutAlign="center center">
            <div fxFlex="0 0 15%">
              <mat-card class="pre-alerted-card">
                <mat-card-header>
                  <mat-card-title>Pre-alerted</mat-card-title>
                </mat-card-header>
                <mat-divider></mat-divider>
                <mat-card-content>
                  <h4>Total: {{preAlertedTotal}}</h4>
                </mat-card-content>
              </mat-card>
            </div>
            <div fxFlex="0 0 15%">
              <mat-card class="received-in-warehouse-usa-card">
                <mat-card-header>
                  <mat-card-title>Pre-alerted</mat-card-title>
                </mat-card-header>
                <mat-divider></mat-divider>
                <mat-card-content>
                  <h4>Total: {{preAlertedTotal}}</h4>
                </mat-card-content>
              </mat-card>
            </div>
            <div fxFlex="0 0 15%">
              <mat-card class="in-transit-card">
                <mat-card-header>
                  <mat-card-title>Pre-alerted</mat-card-title>
                </mat-card-header>
                <mat-divider></mat-divider>
                <mat-card-content>
                  <h4>Total: {{preAlertedTotal}}</h4>
                </mat-card-content>
              </mat-card>
            </div>
            <div fxFlex="0 0 15%">
              <mat-card class="received-in-destination-card">
                <mat-card-header>
                  <mat-card-title>Pre-alerted</mat-card-title>
                </mat-card-header>
                <mat-divider></mat-divider>
                <mat-card-content>
                  <h4>Total: {{preAlertedTotal}}</h4>
                </mat-card-content>
              </mat-card>
            </div>
            <div fxFlex="0 0 15%">
              <mat-card class="out-for-delivery-card">
                <mat-card-header>
                  <mat-card-title>Pre-alerted</mat-card-title>
                </mat-card-header>
                <mat-divider></mat-divider>
                <mat-card-content>
                  <h4>Total: {{preAlertedTotal}}</h4>
                </mat-card-content>
              </mat-card>
            </div>
            <div fxFlex="0 0 15%">
              <mat-card class="delivered-card">
                <mat-card-header>
                  <mat-card-title>Pre-alerted</mat-card-title>
                </mat-card-header>
                <mat-divider></mat-divider>
                <mat-card-content>
                  <h4>Total: {{preAlertedTotal}}</h4>
                </mat-card-content>
              </mat-card>
            </div>
          </div>
            <canvas #barChartCanvas height="80"></canvas>
      </mat-tab>
      <!--#endregion-->
    </mat-tab-group>
  </mat-card-content>
</mat-card>

и S CSS:

:host ::ng-deep .mat-tab-body-content {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
}

.package-form-container {
  border-radius: 5px;
  padding: 1em;
}

@media screen and (max-height: 937px) {
  .table-container {
    height: 55vh;
    overflow: auto;
  }
}

@media screen and (max-height: 757px) {
  .table-container {
    height: 45vh;
    overflow: auto;
  }
}

.pre-alerted-card {
  background-color: #4f5c69;
  color: white
}

.received-in-warehouse-usa-card {
  background-color: #56c78f;
  color: white
}

.in-transit-card {
  background-color: #6badba;
  color: white
}

.received-in-destination-card {
  background-color: #babaff;
  color: white
}

.out-for-delivery-card {
  background-color: #d5c35f;
  color: white
}

.delivered-card {
  background-color: #f09049;
  color: white
}

Я не могу сделать вкладку мат который содержит график для прокрутки. как я могу выполнить это? Мне нужно сделать прокрутку вкладки циновки независимо от высоты холста диаграммы. Я пытался поиграть с mat-tab-body-content css, но безрезультатно.