垫卡对齐

Question

我并排有4张Mat卡。我想要每张高度相同的卡片。

1. 第一张卡片具有文本字段
2. 第二张卡有产品列表
3. 第三张卡片的网格中有图像
4. 第四张卡具有价格历史记录列表

我希望所有这些高度相同的卡，第二张和第四张卡都应具有滚动条，因为我在表中显示了该列表。不幸的是，当我的数据加载时，根据这些表，每张卡都会被扣除。我不要这样的东西。下面是我的HTML。

<mat-card class="name-bar">
  <div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="space-evenly">
    <div fxFlex="10%" fxLayout="column">
      <h1>{{ 'WERBEDATA DETAILS' }}</h1>
    </div>
  </div>
</mat-card>

<div fxLayout="row" fxLayout.xs="column">

  <mat-card fxFlex="20%;" fxFlex.xs="80%" class="mat-elevation-z8">
    <div class="example-container" *ngIf="produkt">
      <mat-form-field appearance="outline">
        <mat-label>WERBE NUMMER</mat-label>
        <input matInput placeholder="WERBE NUMMER" [(ngModel)]="werbedata.WERBE_NR" #WERBENR name="WERBE_NR" value="" readonly>
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>PRODUKT NAME (WERBE NAME)</mat-label>
        <input matInput placeholder="PRODUKT NAME" [(ngModel)]="werbedata.Produktbez" #Produktbez name="Produktbez" value="" readonly>
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>WERBETEXT</mat-label>
        <input matInput placeholder="WERBETEXT" [(ngModel)]="werbedata.Werbetext" #Werbetext name="Werbetext" value="" readonly>
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>VK-EINHEIT</mat-label>
        <input matInput placeholder="VK-EINHEIT" [(ngModel)]="werbedata.MGEHT" #MGEHT name="MGEHT" value="" readonly>
      </mat-form-field>
    </div>
    <div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="end" fxLayoutGap="10px" fxLayoutGap.xs="0">
      <button mat-raised-button color="warn" (click)="goBack()">
        {{ 'CANCEL' }}
        <mat-icon>clear</mat-icon>
      </button>
      <button mat-raised-button color="primary" [routerLink]="['/rullko/werbedata/edit/', filialewerbenr]" class="control-button">
        {{ 'EDIT' }}
        <mat-icon>edit</mat-icon>
      </button>
      <button *ngIf="!isReadOnly" mat-raised-button color="primary" (click)="edit()">
        {{ 'Save' }}
        <mat-icon>save</mat-icon>
      </button>
    </div>
  </mat-card>

  <mat-card class="product-table" class="mat-elevation-z8" fxFlex="20%;" fxFlex.xs="80%">
    <table>
      <thead>
        <th> {{ 'ARTIKEL NO.' }} </th>
        <th> {{ 'PRODUKT BEZEICHNUNG' }} </th>
      </thead>
      <tbody>
        <tr *ngFor="let product of this.products" [routerLink]="['/rullko/produkt/', product.Bildnummer]">
          <td>{{ product.ARTNR }}</td>
          <td>{{ product.PRODUKTBEZ }}</td>
        </tr>
      </tbody>
    </table>
  </mat-card>

  <mat-card fxFlex="40%;" fxFlex.xs="80%" class="mat-elevation-z8">
    <div class="pics-container">
      <div *ngFor="let url of this.urls" class="pic-inside-grid">
        <img [src]="url" />
      </div>
      <div style="clear: both;"></div>
    </div>
    <div class="grid-pics-container">
      <mat-grid-list cols="3" rowHeight="150px">
        <mat-grid-tile>
          <img class="grid-images" [src]="this.secondImage">
          <mat-grid-tile-footer>
            <h3 mat-line> BILD 1 </h3>
          </mat-grid-tile-footer>
        </mat-grid-tile>
        <mat-grid-tile>
          <img class="grid-images" [src]="this.thirdImage">
          <mat-grid-tile-footer>
            <h3 mat-line> BILD 2 </h3>
          </mat-grid-tile-footer>
        </mat-grid-tile>
        <mat-grid-tile>
          <img class="grid-images" [src]="this.fourthImage">
          <mat-grid-tile-footer>
            <h3 mat-line> BILD 3 </h3>
          </mat-grid-tile-footer>
        </mat-grid-tile>
        <mat-grid-tile>
          <img class="grid-images" [src]="this.logo">
          <mat-grid-tile-footer>
            <h3 mat-line> LOGO </h3>
          </mat-grid-tile-footer>
        </mat-grid-tile>
        <mat-grid-tile>
          <img class="grid-images" [src]="this.brandImage">
          <mat-grid-tile-footer>
            <h3 mat-line> BRAND </h3>
          </mat-grid-tile-footer>
        </mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-card>

  <mat-card class="history-table" fxFlex="20%;" fxFlex.xs="80%" class="mat-elevation-z8">
    <table>
      <thead>
        <th> JAHR </th>
        <th> KW </th>
        <th> SEITE </th>
        <th> EURO-VK </th>
      </thead>
      <tbody>
        <tr *ngFor="let hist of this.history">
          <td> {{ hist.Historie.slice(0,4) }} </td>
          <td> {{ hist.Historie.slice(4) }} </td>
          <td> {{ hist.Seite }} </td>
          <td> {{ hist.EUR_VK }} </td>
        </tr>
      </tbody>
    </table>
  </mat-card>

</div>

有人可以帮助我实现这一目标吗？