как установить полную высоту для содержимого шага мата

Question

У меня в приложении есть несколько горизонтальных степперов, и я хотел бы установить в одном из них высоту контента на 100%.

Я не могу это сделать

<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>

Я полагаю, что обновление классов mat-horizontal-content-container и .mat-horizontal-stepper-content должно работать, но тогда это повлияет на остальные мои степперы. Это способ сделать это?

Есть рабочий пример

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

Answer 1

Я надеюсь, что это решение поможет вам

<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