As someone who is just starting to work with Angular and flex layout, I have a simple page setup consisting of a header with a side navbar and router outlet.
I encountered an issue where my page always displays a scrollbar.
If I remove fxFlexFill, the scrollbar disappears. How can I resolve this problem?
You can check out a demo on Stackblitz here
Below is the template code:
.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>