角度卡在flex-layout行中的高度相同

Question

我有一个基于角度材料的ui。我正在使用@material/flex-layout和素材卡，所以我有一个组件布局，如：

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

看起来像这样：

显然，两个盒子的高度不同，这看起来很奇怪。我怎样才能轻松（和响应），确保它们的高度相同？ 感谢

Answer 1

您可以将fxLayoutAlign=" stretch"添加到70％div。 Plunker demo

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

这应该可以解决问题。

只是一个fyi，你可以使用这个demo来尝试不同的flex-layout对齐。