Сжатие блоков CSS в одной строке, если нет содержимого

Question

У меня есть куча коробок / карточек, которые завернуты в div.Иногда в строке могут быть карточки без контента, но они могут быть соседними с карточкой с контентом.Карта без содержимого теперь визуально имеет ту же высоту, что и карта с содержимым, но я не хочу, чтобы карта увеличивалась по высоте, потому что в ней нет содержимого.

Вот мойHTML (используя angular/flex-layout на 2 внешних делителях)

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