Angular - Sidenav Content Has No Scroll Bar

Question

I'm using a sidenav in my Angular app and set the router-outlet as my sidenav-content, doing it this way I dont have a scroll bar in the sidenav-content even though I have components that overflow the Y axis.

I'm still able to scroll the page and eveything is fine, I just find annoying that I don't have a scroll bar.

What could I do to fix this?

app.component.html

<mat-sidenav-container autosize class="h-100">
    <mat-sidenav #sidenav mode="side" opened="true">
        <mat-nav-list>
            ...
        </mat-nav-list>
        <mat-sidenav-content>
            <router-outlet></router-outlet>
        </mat-sidenav-content>
</mat-sidenav-container>

Answer 1

try putting your router-outlet inside a div, then on your css:

.sampleDivClass {
  overflow-y auto
}
``

Answer 2

if the entire page is scrolling when you just wanted the sidenav content to be scrollable you can try setting the overflow of the container hidden and set the overflow of only the sidenav content to auto