Angular Material Sidenav with doubled scrolling content

Question

For an angular material based project I'm trying to use sidenav component with the different view possibilities depending on user's device (desktop or handset). So far it works, but with some issues. Namely the content becomes doubled scrolling as soon as it gets longer.

HTML structure:

<mat-toolbar color="primary">
  <button mat-icon-button *ngIf="...">
    <mat-icon>menu</mat-icon>
  </button>
  Toolbar
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav ...>
    <mat-nav-list>
      <a mat-list-item (click)="closeSidenav()" routerLink="/item1">Item 1</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content class="content">
    <router-outlet></router-outlet>
    <footer>&copy; 2020 Lorem impsum. Dolor sit amet.</footer>
  </mat-sidenav-content>
</mat-sidenav-container>

Using CSS manipulations such as overflow: hidden on the mat-sidenav-content element cuts off invisible content, and applying it to the mat-sidenav-container element doesn't affect it at all.

Here is a StackBlitz Example

Dependency versions:

• @angular: 9.1.12
• @angular/material: 9.2.4

So, what I'm doing wrong? Does anyone know how to fix this? Or a clean/better way of implementing sidenav + toolbar in angular project? Any help would be appreciated!

Answer 1

The toolbar sticks to the md-content not the body -> the inner scrollbar and like the website of angular material they remove the main scroll and use:

body { overflow: hidden; max-width: 100%; max-height: 100%; } 

and keep the internal one only.