如果没有内容，则在同一行中缩小CSS框

Question

我有一堆包装在div内的盒子/卡片。有时，该行可以有没有内容的卡片，但是与有内容的卡片相邻。现在，没有内容的卡片在视觉上与带有内容的卡片的高度相同，但是我不希望卡片的高度增加，因为其中没有内容。

这是我的HTML（在外部2个div上使用angular/flex-layout）

<div fxLayout="column">
  <div fxLayout="row wrap" fxLayoutGap="10px">
    <div *ngFor="let card of cards" [ngClass]="cardColor(card)">
      <div class="card__header">
        <strong>{{getCardName(card.id)}}</strong>
      </div>
      <div class="card__content">
        <ng-container [ngSwitch]="card.cardTypeId">
          <ng-container *ngSwitchCase="3">
            <p>Line 1</p>
            <p>Line 2</p>
            <p>Line 3</p>
          </ng-container>
        </ng-container>
      </div>
      <div class="card__actions">
        <button mat-icon-button color="accent" matTooltip="view more">
          <mat-icon>visibility</mat-icon>
        </button>
      </div>
    </div>
  </div>
</div>

这是相关的CSS（SASS）

.card {
    min-width: 23%;
    max-width: 23%;

    display: flex;
    flex-direction: column;

    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #eeeeee;
    border-radius: 2px;
    background-color: #fefefe;

    @media screen and (max-width: 1600px) {
        min-width: 30%;
        max-width: 30%;
    }

    &__header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        word-wrap: normal;
        margin-bottom: 5px;
        span {
            font-size: 12px;
        }
    }

    &__content {
        flex-grow: 1;
        p {
            font-size: 12px;
            small {
                font-size: 10px;
            }
        }
    }

    &__actions {
        flex-shrink: 0;
    }
}