Yesterday, I encountered an interesting CSS problem involving the mat-drawer and Angular's router-outlet. My layout consists of a full-page flexbox with two children: a mat-toolbar at the top, and a custom component called app-sidenav at the bottom. This setup works well as the app-sidenav expands to fill the remaining space due to the flexible nature of the flexbox. Here is a simplified version of the structure:
<div class="flex">
<mat-toolbar></mat-toolbar>
<app-sidenav></app-sidenav>
</div>
The relevant CSS styles are:
.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; }
Now, within the app-sidenav component, the template looks like this:
<mat-drawer-container>
<mat-drawer></mat-drawer>
<mat-drawer-content>
<main><router-outlet></router-outlet></main>
</mat-drawer-content>
</mat-drawer-container>
And the accompanying styles are:
mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
main { height: 100%; overflow-y: auto; }
While everything seems to be working fine, there is one issue. If the content in the app-sidenav component isn't larger than its height, the scrollbar appears on the outer flexbox rather than the main tag. I've tried using !important, setting heights to 100vh, but so far without success. Any ideas on how to make the overflow-y in the main tag function correctly?
I'm sure there's a simple solution to this, but I just can't seem to figure it out right now. Appreciate any help or insights you might have. Thanks!
Edit:
To further illustrate this issue, I've created a StackBlitz demo. When you navigate to the ciao component, you'll notice that the scrollbar appears at the document root instead of within the main tag.