How to make the ion-card take the remaining height?

Is it possible, I guess through some CSS manipulation, to make the height of the last ion-card equal to the remaining height of the ion-content inside the following Vue2 template?

<template>
  <ion-app>
    <ion-page>
      <ion-content>
        <ion-card>
          <ion-item button>
            <ion-thumbnail slot="start">
              <img src="~assets/svg/QR-code.svg" />
            </ion-thumbnail>
            <ion-label> Generate a new QR Code. </ion-label>
          </ion-item>
        </ion-card>

        <ion-card>
          <ion-card-header>
            <ion-card-title>Header Test</ion-card-title>
          </ion-card-header>

          <ion-card-content>Balance €</ion-card-content>
        </ion-card>

         <ion-card class="last-orders-card">
          <ion-card-header>
            <ion-card-title>Header 1</ion-card-title>
          </ion-card-header>

          <ion-list class="last-orders-list">
            <ion-item v-for="item in items" :key="item.id">
              <ion-label>
                <ion-text color="primary">
                  <h3>Test</h3>
                </ion-text>
              </ion-label>
            </ion-item>
          </ion-list>
        </ion-card>
      </ion-content>
    </ion-page>
  </ion-app>
</template>

I've added the following css classes in order to make the content inside the card (in this case the ion-list) scrollable.

.last-orders-card {
  max-height: 100%;
  display: flex;
  flex-flow: column;
}
.last-orders-list {
  overflow: scroll;
}

I'd like to know if I can fit the height of the card to the remaining space without changing the max-height. I can put it to 50% for instance but that changes depending on the screen size and especially if there are some more cards on top (which is the case but I've omitted them from the snippet for brevity).