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

Issue

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.

Solution

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; }

Answered By - Felix Lemke