Компонент внутри Mat-tab: как прокручивать внутренний компонент

Я работаю над небольшим проектом посещаемости и имею некоторый компонент таблицы в некоторых компонентах мат-вкладки. Когда происходит переполнение таблицы, он прокручивает весь компонент, я хочу, чтобы он прокручивал таблицу только на внутреннем компоненте.

Я попытался добавить «переполнение: авто» в этих разделах:

1. в селекторе (таблица посещаемости приложений)
2. внутри табличного компонента
3. ::ng-deep {.mat-tab-body {переполнение: авто}}
4. на селекторе (mat-tab-group)
5. завернутый (таблица посещаемости приложений) в (ng-контейнер) или (div) и добавление переполнения: авто

Это внешний компонент с вкладками:

  <ng-container>
    <mat-form-field class = "date">
      <input
        matInput
        [matDatepicker] = "picker"
        placeholder = "Select a Date"
        (dateInput) = "addEvent($event)"
        [(ngModel)] = "currentDate"
      />
      <mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  </ng-container>
  <mat-tab-group>
    <ng-container *ngFor = "let grade of result; let i = index">
      <mat-tab *ngIf = "grade.length > 0" [label] = "grades[i]">
        <app-attendance-table [dataSource] = "grade"></app-attendance-table>
      </mat-tab>
    </ng-container>
  </mat-tab-group>
  <div *ngIf = "this.result.length < 1 && !this.loading">
    No Records Found for The Date: {{ currentDate.toDateString() }}
  </div>
  <mat-spinner *ngIf = "this.loading"> </mat-spinner>
</div>

Это сам фактический компонент таблицы:

  <mat-table #table [dataSource] = "dataSource">


    <ng-container matColumnDef = "name">
      <mat-header-cell *matHeaderCellDef> Student Name </mat-header-cell>
      <mat-cell *matCellDef = "let student"
        ><span
          [ngClass] = "{
            absent: student.isAbsent() && !student.Reason,
            finished: student.isAbsent() && student.Reason && !student.editing
          }"
        >
          {{ student.Name }}
        </span>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef = "grade">
      <mat-header-cell *matHeaderCellDef> Student Grade </mat-header-cell>
      <mat-cell
        [ngClass] = "{
          absent: student.isAbsent() && !student.Reason,
          finished: student.isAbsent() && student.Reason && !student.editing
        }"
        *matCellDef = "let student"
      >
        {{ student.Grade }}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef = "status">
      <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
      <mat-cell
        [ngClass] = "{
          absent: student.isAbsent() && !student.Reason,
          finished: student.isAbsent() && student.Reason && !student.editing
        }"
        *matCellDef = "let student"
      >
        {{ student.Status }}
      </mat-cell>
    </ng-container>


    <ng-container matColumnDef = "reason">
      <mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>
      <mat-cell *matCellDef = "let student">
        <mat-form-field
          class = "reasons"
          *ngIf = "!student.isPresent()"
          appearance = "outline"
        >
          <mat-select
            [(ngModel)] = "student.Reason"
            [disabled] = "!student.editing"
            placeholder = "Select Reason"
            (selectionChange) = "makeChange(student)"
          >
            <mat-option
              *ngFor = "let reason of reasons; let i = index"
              [value] = "reason"
              [disabled] = "student.Reason === reason"
            >
              {{ reason }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef = "comments">
      <mat-header-cell *matHeaderCellDef> Comments </mat-header-cell>
      <mat-cell *matCellDef = "let student">
        <mat-form-field *ngIf = "!student.isPresent()">
          <input
            matInput
            [(ngModel)] = "student.Comments"
            [disabled] = "!student.editing"
            (input) = "makeChange(student)"
          />
        </mat-form-field>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef = "edit">
      <mat-header-cell *matHeaderCellDef> </mat-header-cell>
      <mat-cell *matCellDef = "let student">
        <button
          *ngIf = "!student.isPresent() && !student.editing"
          mat-raised-button
          color = "primary"
          (click) = "startEditing(student)"
        >
          Edit
        </button>
        <button
          *ngIf = "!student.isPresent() && student.editing"
          mat-raised-button
          color = "warn"
          (click) = "saveEdits(student)"
        >
          Finish
        </button>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef = "displayedColumns"></mat-header-row>
    <mat-row *matRowDef = "let row; columns: displayedColumns"></mat-row>
  </mat-table>
</div>