Angular Cards to be the same height in a flex-layout row

Question

I have an angular material based ui. I am using @material/flex-layout and material cards, so I have a component layout like:

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div fxFlex="30%">
        <md-card>
            <h3>Last 30 Days</h3>
            <app-oee30 [target]="target" [cell]="cell"></app-oee30>
        </md-card>
    </div>
    <div fxFlex="70%">
        <md-card>
            <h3>24 hours of OEE (target: {{target}}%):</h3>
            <app-oee24 [target]="target" [cell]="cell"></app-oee24>
        </md-card>
    </div>
</div>

which looks like this:

Obviously, the fact that the two boxes aren't the same height looks weird. How can I easily (and responsively), ensure they are the same height? Thanks

Answer 1

You can add fxLayoutAlign=" stretch" to the 70% div. Plunker demo

<div fxFlex="70%" `fxLayoutAlign=" stretch"`>

That should do the trick.

Just an fyi, you can use this demo to try different flex-layout alignment.