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


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">

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


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.


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.


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

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.