Angular material sidenav dynamic height

Im using: Angular 9.1.4 with Angular/Material 9.2.4

For a project I am doing at the moment there is a requirement to create dynamic components in a material sidenav.

https://material.angular.io/components/sidenav/overview

I had it all set up and it does work, except for the new request which is that if the dynamic component height is for example 400px, the material sidenav does not expand to the bottom but cuts off at the height of the component.

Does anyone know a clean way of doing this? If not it could also be with CSS tricks.

Here is a stackblitz example https://stackblitz.com/angular/kknqvrklpgx?file=src%2Fapp%2Fsidenav-autosize-example.ts

Create a class that describe the core of the sidenav and create other 2 class that describe the 2 state of the navbar. When you are extra expanding just change the class state applied on the navbar based on your showfiller state.

  <mat-drawer #drawer class="example" [ngClass]="{'example-cropped': showFiller, 'example-full': !showFiller}"  mode="side">



.example{
 padding: 20;
}
.example-cropped{
  background-color:red;
}

.example-full {
  background-color:green;
  height: 200px;
}