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

Question

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%2Fapp%2Fapp.component.html

Answer 1

I hope this solution will help you

<div fxLayout style="height: 95%">
    <mat-horizontal-stepper fxLayout="column" fxFlex="100" fxLayoutAlign=" stretch" #stepper style="background: #DDD">
        <mat-step label="Step 1" fxFlex="100"  fxLayout="column">
            <div style="border: 2px solid green;" fxFlex="100">
                <div fxFlex="100" fxFill style="border: 2px solid red;">
                    Step 1: must fill the entire space
          <p>Issues? <a href="mailto:&#103;&#105;&#116;&#104;&#117;&#098;&#064;&#116;&#111;&#110;&#121;&#115;&#097;&#109;&#112;&#101;&#114;&#105;&#046;&#105;&#116;">Text me!</a>
                </div>
            </div>
        </mat-step>
        <mat-step label="Step 2">
            <div style="border: 2px solid green;height:100%;">Step 2: must fill the entire space too, but it's shifted down!</div>
        </mat-step>
        <mat-step label="Step 3">
            Step 3: This is even more shifted!
        </mat-step>
        <mat-step label="Step 4">
            Step 4: ...
        </mat-step>
    </mat-horizontal-stepper>
</div>

StackBlitz