How to have scrolling after mat-toolbar - angular-material

Question

I have mat-toolbar, so here i want the scrolling on the page to happen after mat-toolbar. so that mat-toolbar remains as fixed header. So that even if i scroll down i see the toolbar.
<mat-toolbar style="flex: 0 0 128px;" color="primary">
<button mat-icon-button aria-label="Back" routerLink="/reports">
<mat-icon>arrow_back</mat-icon>
</button>
<mat-card-title>Upload Report</mat-card-title>
</mat-toolbar>
<div>
//other form elements
</div>

Answer 1

Wrapping the toolbar and the other content in a CSS grid - having 100% height - will work, making both a grid row where the toolbar has auto height and the other content has overflow:auto.
<div class="container">
<mat-toolbar>
<h1>
Fixed Angular Material toolbar
</h1>
</mat-toolbar>
<main>
<p>
This is the main content which is scrollable because the main content has 'overflow-y: auto' and is a grid row
with a height of 1fr (the container is a CSS grid). This only works when the container div has a height of 100%.
</p>
</main>
</div>
.container {
height: 100%;
display: grid;
grid-template-rows: auto 1fr; // mat-toolbar main
}
/* Grid row 1 */
mat-toolbar {
}
/* Grid row 2 */
main {
overflow-y: auto;
padding: 1rem;
}
Here is a working example: https://www.jitblox.com/design/MdTqMjv9Pr