html - Angular Cards 在 flex-layout 行中的高度相同

Question

我有一个基于 Angular Material 的用户界面。我正在使用 @material/flex-layout 和 Material 卡，所以我有一个组件布局，如:

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

这应该可以解决问题。

仅供引用，您可以使用这个 demo尝试不同的 flex-layout 对齐方式。