Force angular mat-toolbar and mat-sidenav to take up exactly 100% of the available vertical space

Question

I'm trying to create an Angular app that has both a toolbar and a sidenav. I want to make it so that the vertical height of both the toolbar and the sidenav add up to 100% of the available vertical space of the browser window. However I can't figure out how to do this. At the moment I have a toolbar and a sidenav which has nothing inside it but a height: 100% . However this forces the sidenav to be bigger than the available space and thus it becomes scrollable.

I want to force both of these to have 100% height and nothing more to ensure that the page doesn't become scrollable. I plan to have a component that fills the remaining space which will house the content of the page and will scroll. I do not want the body of the page to scroll.

Surely this cannot be hard to do? I've been trying for a few hours now.

HTML

<mat-toolbar>
    <span>Text</span>
</mat-toolbar>

<mat-sidenav-container>
    <mat-sidenav opened mode="side">
    </mat-sidenav>
    <mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

CSS

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

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

mat-sidenav{
  background-color: #e7e9f2;
  width: 200px;
  border: 0;
}

mat-sidenav-content{
  background-color: white;
  overflow-y: scroll;
}

Answer 1

Found a solution for this, hopefully it helps anyone who's struggling with the same issue.

I'm not sure if this is the proper way, but it works nonetheless.

Create a div that wraps your mat-toolbar and mat-sidenav-container elements, and give it the following properties.

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
}

Final HTML

<div class="body-container">
    <mat-toolbar>
        <span>Text</span>
    </mat-toolbar>
    <mat-sidenav-container>
        <mat-sidenav opened mode="side">
            <app-left-sidebar></app-left-sidebar>
        </mat-sidenav>
        <mat-sidenav-content>
            <router-outlet></router-outlet>
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>