Angular границы таблицы материалов не во всю длину

Question

Я пытаюсь создать красивую таблицу. Поскольку контент скоро появится в матричной части, я не могу уменьшить его для мобильных устройств. Поэтому я добавил overflow: auto, чтобы получить полосу прокрутки.

Проблема в том, что горизонтальные линии не распространяются на всю таблицу, она обрезается в части за прокруткой.

До прокрутки

После прокрутки

HTML

  <ng-container matColumnDef="module">
    <mat-header-cell *matHeaderCellDef [ngClass]="'smallCell'"> Module</mat-header-cell>
    <mat-cell *matCellDef="let moduleData" [ngClass]="'smallCell'"> {{moduleData.module}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="specialisation">
    <mat-header-cell *matHeaderCellDef [ngClass]="'smallCell'"> Spec</mat-header-cell>
    <mat-cell *matCellDef="let moduleData" [ngClass]="'smallCell'">
      <mat-list dense>
        <mat-list-item *ngFor="let specialisation of moduleData.specialisation"> {{specialisation}}</mat-list-item>
      </mat-list>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="period">
    <mat-header-cell *matHeaderCellDef [ngClass]="'smallCell'"> Periode</mat-header-cell>
    <mat-cell *matCellDef="let moduleData" [ngClass]="'smallCell'"> {{moduleData.period}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="matrix">
    <mat-header-cell *matHeaderCellDef [ngClass]="'matrixCell'"> Matrix</mat-header-cell>
    <mat-cell *matCellDef="let moduleData" [ngClass]="'matrixCell'"> {{moduleData.matrix}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="endRequirements">
    <mat-header-cell *matHeaderCellDef [ngClass]="'requirmentCell'"> Eindeisen</mat-header-cell>
    <mat-cell *matCellDef="let moduleData" [ngClass]="'requirmentCell'">
      <mat-list>
        <mat-list-item *ngFor="let requirement of moduleData.endRequirements"> {{requirement}}</mat-list-item>
      </mat-list>
    </mat-cell>
  </ng-container>

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

Css

.table-container{
  height: calc(100vh - 114px);
  overflow: auto;
}

.requirmentCell{
  flex: 0 0 325px;
}

.matrixCell{
  flex: 0 0 550px;

}

.smallCell{
  flex: 0 0 110px;

}

редактировать Дальнейшая возня, здесь обрезана не только граница. Любой css лайк, цвет фона и заголовок.