How can I make the last mat-card to stretch out to fill the remaining vertical space?

Question

Code Snippet:

Problem Description: I'm working on a project where I have to make the last mat-card containing the + Manually enter button to stretch out vertically filling the remaining space.

  <div class="regulated-details">
        
          <div *ngFor="let product of links">
            <mat-card
              class="mat-card-element padding-4x mat-elevation-z0"
              fxLayout="row"
              fxLayoutAlign="space-between none"
            >
              <div fxLayout="column">
                <div class="text-caption margin-bottom-1x">
                  <span class="text-color-neutral-600 margin-bottom-1x"></span>
                  <span class="text-bold-body">
                    {{ product }}
                  </span>
                </div>
              </div>
              <button
                id="details-vertical-button-{{ i }}"
                mat-icon-button
              ></button>
            </mat-card>
          </div>
          <mat-card>
            <button
              mat-flat-button
              class="icon-button"
              color="primary"
            >
              <mat-icon svgIcon="add"></mat-icon>
              + Manually enter
            </button>
          </mat-card>
        </div>

CSS

:host,
.mat-card-element {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
.add-unique-packages {
  overflow-y: hidden;
  overflow-x: hidden;
}
.deleteIcon {
  display: flex;
  flex-direction: column;
}
.full-height-card {
  height: 100%;
}

Actual Image

How I want the last card to be shown

Answer 1

Try giving flex to the parent element, and then flex: 1 to the element that needs to be stretched.

.regulated-details {
    display: flex;
}

.regulated-details > mat-card {
    flex: 1;
}

please make sure to remove all the styles connected to the height in order for this to work.