Unable to show horizontal scroll bar in current view mat-table

Question

I am using angular-material v18.0.3 and using mat-table to display content.

The dynamic table can have 100+ rows and there are 17 columns. The data overflow horizontally but I am unable to add horizontal scroll bar so that the user can see the contents of last few columns (Sure, the horizontal scrollbar is at the bottom of the table, but I do not want to go to the bottom of the table just to scroll right and go to the top to view contents of the first row).

I have tried most answers I came across on internet. Please help!

// taken from https://github.com/angular/components/issues/8680
.table-container {
  width: 170vw;
  overflow: auto;
}
.mat-mdc-table {
  overflow-x: scroll;
}

  <div class="p-10" *ngIf="showPagination">
    <div class="table-container mat-elevation-z8">
      <table mat-table [dataSource]="dataSource">
        <ng-container class="col-0" matColumnDef="updateTs">
          <th mat-header-cell *matHeaderCellDef id="1">Update TS</th>
          <td mat-cell *matCellDef="let item"> {{ item.updateTs }}</td>
        </ng-container>

        <ng-container class="col-3" matColumnDef="transactionTs">
          <th mat-header-cell *matHeaderCellDef id="2">Transaction TS</th>
          <td mat-cell *matCellDef="let item"> {{ item.transactionTs }}</td>
        </ng-container>
        ...........
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row (mouseout)="row.hovered = false"
            (mouseover)="row.hovered = true"
            (focus)="row.hovered = true"
            (blur)="row.hovered = false"
            tabindex="0"
            *matRowDef="let row; columns: displayedColumns;"
            [ngClass]="{hovered: row.hovered, highlighted: row.highlighted}">
        </tr>
      </table>
      </div>
      </div>