How can I set the height of a v-card independently from the content, without setting a static height?

Question

I have a Vuetify 3 application with a header, a navigation drawer and a v-main with a v-card inside where my router-view is placed.

My problem is that the card gets bigger when the content takes more space than the 100%. But if the content is bigger, it should be scrollable inside the v-card-text without changing the size.

So: how can I set the height of the v-card (or v-card-text?) independently from the content, without setting a static height (like height="300px")?

<template>
  <v-app id="app">
    <Header></Header>
    <NavigationDrawer></NavigationDrawer>
    <v-main class="flex-grow-1">
      <v-container class="cardContainer pa-0 pr-4 pb-4" fluid>
        <v-card id="vcard" height="100%">
          <v-card-text style="max-height: inherit;">
            <router-view :key="$route.path"></router-view>
          </v-card-text>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

<style>
.cardContainer {
  height: 100%;
  max-height: 100%;
}
</style>