Angular Flex Layout Always shows scrollbar - css

Question

I am new to angular and flex layout. My Page is pretty simple. Header with side navbar and router outlet.
I ran into the issue that my Page always shows a scrollbar.
If I remove fxFlexFill, scrollbar not showing. How can I fix this?
Here is stackblitz demo Stackblitz
Here is my template:
.fill-space {
flex: 1 1 auto;
}
.content {
flex: 1 1 auto;
padding: 15px;
position: relative;
overflow-y: auto;
}
.footer {
display: flex;
flex: 1 0 auto;
justify-content: center;
}
<div style="height: 100vh;">
<mat-toolbar color="primary" class="fixed-header">
<mat-toolbar-row>
<button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
<mat-icon>menu</mat-icon>
</button>
<span><button mat-button routerLink="/home"><h3>HOSPITALITY</h3></button></span>
<span class="fill-space"></span>
<div fxShow="true" fxHide.lt-md="true">
<button mat-button routerLink="/home">HOME</button>
<button mat-button routerLink="/account">MY ACCOUNT</button>
<button mat-button routerLink="/login">LOGOUT</button>
<a href="#" routerLink="/cart" mat-button>
<mat-icon>shopping_cart</mat-icon>
0
</a>
</div>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container fxFlexFill>
<mat-sidenav #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
<div fxLayout="column">
<button mat-button routerLink="/home">HOME</button>
<button mat-button routerLink="/account">MY ACCOUNT</button>
<button mat-button routerLink="/login">LOGOUT</button>
<a href="#" routerLink="/cart" mat-button>
<mat-icon>shopping_cart</mat-icon>
0
</a>
<a (click)="sidenav.toggle()" mat-list-item>
<mat-icon>close</mat-icon> Close
</a>
</div>
</mat-sidenav>
<mat-sidenav-content >
<div class="content">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</div>

Answer 1

The main issue is that the side nav gets a height of 100vh via the fxFlexFill directive.
You need to take into account the height of mat-toolbar-row, for example, by CSS calc (there are other ways to achieve his effect, depends on how you struct page layout)
Additionally, the body has an 8px margin, from the browser default style.
Here is a fork of Stackblitz