如何使mat sidenav占据mat工具栏下方的整个垂直空间?

我正在尝试让下面的角度材料布局工作。我有一个 mat-toolbar 在顶端,和 mat-sidenav mat-sidenav-container 占据整页的高度。这是我尝试使用网格布局。看起来应该管用,但实际上不行。好像 mat-sidenav-content .

<div class="main-div">
  <app-header class="app-header"></app-header>
  <app-sidenav class="app-sidenav"></app-sidenav>
</div>

以下是我的css:

.main-div {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.app-header {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.app-sidenav {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}