垫侧导航栏不会延伸到窗口的整个宽度

Question

我目前在理解Angular（Angular-版本5）方面处于中级水平。我一直在尝试构建自己的示例应用程序，也打算在UX中使用角形材质组件。

当我使用mat-side-nav时，导航内容不会延伸到整个浏览器/窗口的高度。相反，它只是延伸到非常小的高度。

以下是我当前在项目中拥有的代码。

Header.component.html

<div class="container">
  <mat-toolbar color="primary">
    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
    <span class="example-spacer"></span>
    <H3 style="color:white;" class="navbar-brand">Agile Center</H3>
    <span class="example-spacer"></span>
    <button mat-icon-button><mat-icon>dashboard</mat-icon></button>
    <button mat-icon-button><mat-icon>settings</mat-icon></button>
    <span [hidden]="isUserLoggedIn">
        <!--<a mat-button routerLink="." style="color:white">Logout</a> -->
        <button mat-icon-button><mat-icon>power_settings_new</mat-icon></button>
    </span>
  </mat-toolbar>

  <mat-sidenav-container class="example-sidenav-container">
    <mat-sidenav #snav mode="over" fixedTopGap="56">
      <mat-nav-list>
        <a mat-list-item routerLink="backlog">Backlog</a>
        <a mat-list-item routerLink=".">Active Sprints</a>
        <a mat-list-item routerLink=".">Releases</a>
        <a mat-list-item routerLink=".">Reports</a>
        <a mat-list-item routerLink=".">Issues</a>
        <a mat-list-item routerLink=".">Administration</a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

Header.component.css

.example-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 5px;
}

.example-sidenav-container {
    /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
       causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
    flex: 1;
}

.example-spacer {
    flex: 1 1 auto;
}

header.component.ts中还没有代码

app.component.html中的代码

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

侧面导航栏的屏幕截图

任何人都可以帮我解决这里的问题吗？

感谢所有人！