how to set full-height to a the mat step content

I have an some horizontal steppers in my app, and I would like to set in one of them the content height to 100%.

I'm not able to do it

<div style="height: 500px; border: 2px solid blue;">
<mat-horizontal-stepper #stepper fxFlexFill style="background: red">
<mat-step label="Step 1" fxFlexFill>
<div style="border: 2px solid green;" fxFlexFill>
test size
</div>
</mat-step>
<mat-step label="Step 2" fxFlexFill>
<div style="border: 2px solid green;" fxFlexFill>
test size
</div>
</mat-step>
</mat-horizontal-stepper>
</div>


I guess that updating mat-horizontal-content-container and .mat-horizontal-stepper-content classes should work, but then the rest of my steppers will be affected. Is it a way to do it?

There is a working example

https://stackblitz.com/edit/angular-zcvugh?file=src/app/app.component.html

Continue reading...