Горизонтальное переполнение таблицы угловых материалов перемещает колонки за пределы экрана?

Question

Я пытался сделать свои таблицы более мобильными / удобными для планшетов, и я использовал пример таблицы Angular Material в документации с прикрепленным столбцом.

Проблема в том, что, когда я прокручиваю горизонтально, таблица выходит за пределы экрана, за липкой колонкой, несмотря ни на что, вот запись экрана: https://streamable.com/oesai - я сделал чирок цвета и фона в ячейки для покрытия данных.

Я добавил свои собственные классы в ячейки заголовка и ячейки таблицы, таблица внутри div с CSS flex. Если я установлю переполнение на auto / scroll на самом div, вы не сможете увидеть его прокрутку за липкой ячейкой, но все равно это произойдет, и вы все равно не сможете получить эти данные.

Мои текущие стили (SASS):

.manage-users-table {
  .manage-users-table-cell {
    padding: 10px;
    font-weight: 500;
    font-size: 14px;
  }
  #name-cell {
    white-space: nowrap !important;
  }

  .manage-users-table-header {
    font-weight: 400;
    font-size: 14px;
    color: $DarkGrey;
  }
}

.mat-table {
  overflow: scroll;
}

Часть nowrap предназначена исключительно для столбца имени.