Scenario
The total width of our header columns expands beyond the viewport size.
The mat-header-row , as currently designed, has its display property set to flex causing it to take on the width of the parent container.
Thus since the total column width expands beyond this width, our table CSS will have short comings.
Solution
Set the display property for mat-header-row and mat-row to inline-flex , because it will cause the container to expand to fit the content it contains.
.mat-footer-row,
.mat-header-row,
.mat-row {
display: inline-flex;
min-width: 100%;
}