Sidenav打开时如何使内容适应屏幕（Im Using Angular 5）

Question

问题： 您好世界，我正在将Angular 5与Angular Material一起使用。我已经奋斗了几天，但是做不到的是，当打开Sidenav或Sidebar（您要调用它）时，内容离开了屏幕。我希望它适应内容，而不是离开。

gif值不超过一千个字：

app.header-component.html

<!--- Toolbar starts here-->
<div class="container-toolbar">
<mat-toolbar color="primary" class="fixed-header">

<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span class="spacer"></span>
<button type="button" mat-icon-button href="">
<mat-icon matTooltip="Salir">exit_to_app</mat-icon>
</button>


</mat-toolbar>
</div>

<!--- Sidenav starts here -->
<mat-sidenav-container style="height:100%;width:100%;">
  <mat-sidenav #drawer fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'side' : 'push'"
      [opened]="(isHandset$ | async)" style="box-shadow: 0 5px 5px #999;z-index: 2;">
   		<mat-nav-list>
<app-tabs-nav></app-tabs-nav>
		</mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>

    <router-outlet></router-outlet>

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

app.component.html

<app-header></app-header>
<div class="app-body">


  <main class="main">
    <div class="container-fluid">
      <!-- <router-outlet></router-outlet> -->
      <ngx-loading [show]="loading"></ngx-loading>
    </div>
  </main>
</div>

有人可以告诉我从哪里开始寻找解决方案吗？我已经尝试了很多事情，但是我有些受阻，谢谢！