Высота циновки увеличивается при увеличении количества предметов в углах 6

Question

Я новичок в Angular 6, здесь я использую Material design для моего приложения.

Проблема в том, что при увеличении количества предметов в pagnator также увеличивается высота таблицы матов.

То, что я хочу сделать, - это когда я увеличиваю количество пангаторов, я хочу включить полосу прокрутки в таблице вместо увеличения ее высоты.

изображение с количеством элементов 10:

Изображение с количеством элементов 25:

app.component.html

<div class="col-sm-7">
        <div class="row">

          <mat-card class="col-sm-12" style="margin-top:50px;overflow: hidden">

                  <mat-card class="searchBox" style="position:sticky;padding: 8px">
                    <mat-form-field class="col-sm-12">
                      <mat-label>Search</mat-label>
                      <input matInput (keyup)="filterService($event.target.value)" placeholder="Search...">
                    </mat-form-field>
                  </mat-card>


                  <div style="overflow-y: scroll"> 
                    <table mat-table [dataSource]="dataSource" matSort>

                      <ng-container matColumnDef="CSER_ID">
                        <th class="colHeaderStyle" mat-header-cell *matHeaderCellDef mat-sort-header> S.No </th>
                        <td  mat-cell *matCellDef="let service"> {{service.CSER_ID}} </td>
                      </ng-container>

                      <ng-container matColumnDef="CSER_NAME">
                        <th class="colHeaderStyle" mat-header-cell *matHeaderCellDef mat-sort-header> Service Title </th>
                        <td  mat-cell *matCellDef="let service"> {{service.CSER_NAME}} </td>
                      </ng-container>

                      <ng-container matColumnDef="CSER_DAY">
                        <th class="colHeaderStyle" mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
                        <td  mat-cell *matCellDef="let service"> {{service.CSER_DAY}} </td>
                      </ng-container>

                      <ng-container matColumnDef="CSER_TIME">
                        <th class="colHeaderStyle" mat-header-cell *matHeaderCellDef mat-sort-header> Time </th>
                        <td  mat-cell *matCellDef="let service"> {{service.CSER_TIME}} </td>
                      </ng-container>

                      <ng-container matColumnDef="CSER_STATUS">
                        <th class="colHeaderStyle" mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
                        <td mat-cell *matCellDef="let service"> {{service.CSER_STATUS}} </td>
                      </ng-container>

                      <ng-container matColumnDef="ACTION">
                        <th class="colHeaderStyle" mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
                        <td  mat-cell *matCellDef="let service">
                          <span (click)="editServiceData(service.CSER_ID)" class="cursor" matTooltip="Edit"><i class="material-icons">border_color</i></span>
                        </td>
                      </ng-container>

                      <tr mat-header-row class="mat-header-row" style="height:45px" *matHeaderRowDef="displayColumns"></tr>
                      <tr mat-row style="height:35px" *matRowDef="let row; columns: displayColumns;"></tr>

                    </table>
                  </div>
                  <mat-paginator class="mat-paginator-sticky " [pageSizeOptions]="[10,25,50,100]" showFirstLastButtons></mat-paginator>

          </mat-card>

        </div>
      </div>

app.component.css

.table {
    width: 100%;
    overflow: auto;
    flex-grow: 1;
  }

  .mat-form-field {
    font-size: 14px;
    width: 100%;
  }

  .td, th {
    width: 25%;
  }

  .colHeaderStyle{
    font-weight: bold;
    font-size: 14px;
    color:#FFFFFF;
    background: #212529;
  }
  .mat-row:nth-child(even){
    background-color:#f2f4f7;
    }

  .mat-row:nth-child(odd){
    background-color:none;
    }
  .searchBox{
    padding:10px;
    padding-bottom:5px;
  }
  .material-icons {
    font-size: 15px !important;
  }
  .mat-row:hover {
    background-color: #93E7FB;
  }
  .mat-paginator-sticky {
    bottom: 0px;
    position: sticky;
    z-index: 10;
  }

Может кто-нибудь помочь мне исправить это.