Component inside Mat-tab: How to scroll inner component - html

Question

I'm working on a small attendance project and have some table component within some mat-tab components. When there is overflow from the table, it scrolls the full component, I only want it to scroll the table on the inner component.
I have tried adding "overflow: auto" in these sections:
on the (app-attendance-table) selector
inside table component
::ng-deep { .mat-tab-body { overflow: auto } }
on the (mat-tab-group) selector
wrapped (app-attendance-table) in an (ng-container) or (div) and adding overflow: auto
This is the outer component with tabs:
<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>
This is the actual table component itself:
<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>

Answer 1

To make sure the table is scrollable, wrap the table inside div with a fixed height and make its overflow: auto.
You can also check below links that has both page as well as table as scrollable.
https://angular-qfqpwr.stackblitz.io (Working Stackblitz)
https://material.angular.io/components/table/examples (Table with sticky header)

Answer 2

To extend on #Pankaj Prakash's answer, you should set the overflow property on your outer container to overflow: hidden.
Then wrap a div around the mat cells and set the property to overflow: scroll. If you only want a vertical scroll you could also set the following property instead: overflow-y: scroll