Angular Material mat-drawer in full height flex, content overflow auto

Question

Yesterday I faced a CSS issue which seems to be related to mat-drawer and Angulars router-outlet. I have got a fullpage flexbox with two children. A mat-toolbar at the top and a custom component app-sidenav at the bottom. This works fine and the app-sidenav fills the rest of the page since the flexbox is stretchy. Have a look at this simplified setting before continue:

<div class="flex">
  <mat-toolbar></mat-toolbar>
  <app-sidenav></app-sidenav>
</div>

The related css is

.flex { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; }
mat-toolbar { flex: 0 0 auto; }
app-sidenav { flex: 1 1 0; }

In the app-sidenav component I now have the following template

<mat-drawer-container>
  <mat-drawer></mat-drawer>
  <mat-drawer-content>
    <main><router-outlet></router-outlet></main>
  </mat-drawer-content>
</mat-drawer-container>

And the related styles are

mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
main { height: 100%; overflow-y: auto; }

This works fine and the height is appropriate unless there is no content larger than the app-sidenav height. The scrollbar appears at the outer flexbox component and not at the main-tag. I also tested !important at the heights and also 100vh but with no success. So how can I get the overflow-y at the main tag working?

I'm pretty sure that there is a simply trick, but I can't get it for know. Thanks for your help. Cheers!

---

Edit:

I made a stackblitz for this issue. When you navigate to the ciao component you see that the scrollbar appears at the document root and not in the main tag.

Answer 1

In addition to @Sakkeer's working solution I found another way without hacking the position attribute but with usage of flex. Just add (not replace) the following css rules to the existing styles.

app-sidenav { display: flex; }
mat-drawer-container { flex: 1 1 auto; }