first fill tab view also according to screen size
In order to fill the page, the page needs to fill the window:
**styles.css**
body, html{ height: 100%; margin: 0; }
The app component needs to fill the body:
app.component.css
:host{ box-sizing: border-box; display: block; height: 100%; }
By default the wrappers of the content within the tabs are not filling the tab's height so we will fix this:
**styles.css**
.mat-tab-body-wrapper{ flex-grow: 1; }
We also need to have the mat-tab-group fill the height, it's parent needs to fill the height too, so we will give an id to both the wrapper and the tab-group.
app.component.ts <div id="wrapper"> <!-- give it an id --> <div fxLayout="row" fxLayoutGap="16px" fxFill> <div fxFlex="20"> <p>Fun Sidebar</p> </div> <div fxFlex="80" fxFill> <mat-tab-group id="tab-group"> <!-- give it an id --> <mat-tab label="Summary"> <div fxFlex style="padding: 16px;"> <div class="mat-display-2">Hello</div> <p>Lorem ipsulem</p> </div> </mat-tab> <mat-tab label="Tall content"> <app-tall-component></app-tall-component> </mat-tab> </mat-tab-group> </div> </div> </div>
**app.component.css**
#wrapper{ padding: 16px; min-height: 100%; height: 100%; box-sizing: border-box;/*new*/ } #tab-group{ height: 100%; } #tab-group mat-tab-body { flex-grow: 1; }

In order to fill the page, the page needs to fill the window:
**styles.css**
body, html{ height: 100%; margin: 0; }
The app component needs to fill the body:
**app.component.css**
:host{ box-sizing: border-box; display: block; height: 100%; }
By default the wrappers of the content within the tabs are not filling the tab's height so we will fix this:
**styles.css**
.mat-tab-body-wrapper{ flex-grow: 1; }
We also need to have the `mat-tab-group` fill the height, it's parent needs to fill the height too, so we will give an id to both the wrapper and the tab-group.
**app.component.ts**
<div id="wrapper"> <!-- give it an id --> <div fxLayout="row" fxLayoutGap="16px" fxFill> <div fxFlex="20"> <p>Fun Sidebar</p> </div> <div fxFlex="80" fxFill> <mat-tab-group id="tab-group"> <!-- give it an id --> <mat-tab label="Summary"> <div fxFlex style="padding: 16px;"> <div class="mat-display-2">Hello</div> <p>Lorem ipsulem</p> </div> </mat-tab> <mat-tab label="Tall content"> <app-tall-component></app-tall-component> </mat-tab> </mat-tab-group> </div> </div> </div>
**app.component.css**
#wrapper{ padding: 16px; min-height: 100%; height: 100%; box-sizing: border-box;/*new*/ } #tab-group{ height: 100%; } #tab-group mat-tab-body { flex-grow: 1; }
----------
https://stackblitz.com/edit/angular-awamwn?file=src%2Fapp%2Fapp.component.html