Angular Material Table horizontal overflow moves columns off-screen?

Question

I've been trying to make my tables more mobile/tablet friendly and I used Angular Material's table example in the documentation with the sticky column.

The problem is when I scroll horizontally, the table goes off the screen, beyond the sticky column no matter what, here's a screen recording: https://streamable.com/oesai -- I made the color & background-color teal in the cells to cover the data.

I've added my own classes to header-cells and table cells, the table is inside a div with CSS flex. If I put the overflow to auto/scroll on the div itself, you can't see it scrolling behind the sticky cell but it still does and you still can't reach that data.

My current styles (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;
}

The nowrap part is solely for the name column.