Vuetify make content (table) of card fit inside it

问题

I have a card inside a dialog with a title and a table (it will be more complex in the future). The dialog has a set width="80vw". I want neither the dialog nor the card to scroll, but I'd like the table to scroll with the header fixed, so you can always see column names. When I set fixed height to the table in pixels, it does what I want automatically, however using overflow-y or percent height does nothing.

How can I make the table fit the card?

<v-card height="80vh">
   <v-card-title>
      Files
   </v-card-title>
   <v-card-text>
      <v-simple-table fixed-header>
         <template v-slot:default>
            <thead>
               <tr>
                  <th class="text-left">Name</th>
               </tr>
            </thead>
            <tbody>
               <tr v-for="file in files" :key="file.name" @click="select(file)">
                  <td>
                     <v-icon>{{ file.directory ? "mdi-folder-outline" : "mdi-file" }}</v-icon>
                     {{ file.name }}
                  </td>
               </tr>
            </tbody>
         </template>
      </v-simple-table>
   </v-card-text>
</v-card>

回答1:

I've managed to do this using d-flex, overflow and ditching the vuetify layout and just using divs instead. It feels to me like a hack and not like the way it's supposed to be done, but I have not yet found a better solution. Kinda seems that the bootsrap style layout doesn't support stretching and shrinking of items, which is very disappointing.

<v-card height="80vh" class="d-flex">
   <v-container class="d-flex flex-column" fluid>
      <div>
         Files
      </div>

      <v-simple-table fixed-header class="d-flex flex-column" style="overflow-y: hidden">
         <template v-slot:default>
            <thead>
               <tr>
                  <th class="text-left">Name</th>
               </tr>
            </thead>
            <tbody style="overflow-y: scroll">
               <tr v-for="file in files" :key="file.name" @click="select(file)">
                  <td v-ripple>
                     <v-icon>{{ file.directory ? "mdi-folder-outline" : "mdi-file" }}</v-icon>
                     {{ file.name }}
                  </td>
               </tr>
            </tbody>
         </template>
      </v-simple-table>

   </v-container>
</v-card>

来源：https://stackoverflow.com/questions/62029810/vuetify-make-content-table-of-card-fit-inside-it