
Scenario
We want our mat-sidenav-container to cover the entire screen.
Approach
Use the fullscreen directive.
<mat-sidenav-container fullscreen>Demo
Try removing fullscreen and see what happens:
Bonus
Complete markup that can be used inside a custom component replacing mat-sidenav-container:
<mat-sidenav-container fullscreen>
<ng-content></ng-content>
</mat-sidenav-container>