angular material card height not filling with flex layout

2
votes

I am trying to get these inner cards to fill their height, i feel like i am not using flex layout properly.

<div fxlayout="row">
  <div fxFlex style="padding: .5%">
     <mat-card>
       hi
     </mat-card>
  </div>
  <div fxFlex style="padding: .5%">
     <mat-card>
        hpo
     </mat-card>
  </div>
</div>

enter image description here

1
angularangular-materialangular-flex-layout
how do you want to see? – Sajeetharan
where the two inner cards expand to full height instead of the one row it is currently. height:100% doesnt work, hieght:850% does but then doesnt look good if used on mobile. – user1552172

1 Answers

1
votes

I would first fxLayout="column" and then use fxFlexFill which will strech to full 100% height.