Angular Mat Side navigation bar issues when content is huge and footer issues

Question

I am using Material side navbar and I am facing issues when the content is huge and my footer is displaying in odd places. guide me in this

navbar Html:

<mat-sidenav-container autosize >
  <mat-sidenav #sidenav="matSidenav" class=""   opened="isExpanded" >
    <mat-nav-list>
      </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar class="mat-elevation-z2 ">   <button
      mat-icon-button
      *ngIf="sidenav.mode === 'over'"
      (click)="sidenav.toggle()"
    >
      <mat-icon *ngIf="!sidenav.opened"> menu </mat-icon>
      <mat-icon *ngIf="sidenav.opened"> close </mat-icon>
    </button>
    <h2>portal for demo</h2>
    <span class="spacer"></span>
    <div>
      <a mat-button routerLink="/user/login"><mat-icon>logout</mat-icon>Sign out</a>
      <a mat-button routerLink="/user/register"><mat-icon>login</mat-icon>Log In</a>
      <a mat-button routerLink="/user/login"><mat-icon>account_circle</mat-icon> Contacts </a>
    </div>
    </mat-toolbar>
    <div class="content">
      <router-outlet></router-outlet>
    </div>
    <mat-toolbar class="footer">footer</mat-toolbar>

  </mat-sidenav-content>
</mat-sidenav-container>

.content {
    height: calc(100vh - 130px);
    border-radius: 10px;
    margin: 16px;
    margin-left: 16px;
    padding: 16px; 
   } 
 
.menu-button {
  margin-left: 8px;
}
mat-sidenav-container {
  height: 100%;
}
.footer{
    height: 32px;
  }

outputs:

how to overcome this issue my footer should load after the content and my sidenav should be fixed and two scroll bars should not display when I minimize the screen. suggest me with clean code

output with:

mat-sidenav-container {
  height: 100vh;
}