Css 如何使用vuetify2使所有v卡高度相等

我想让vuetify2项目中的所有v-Card大小都相等。我的中心（v-card-text）具有不同的字符数（text）。使用固定高度的v-card-text进行测试，但如果文本较长，则不会出现预期的滚动条

这是一个v-card组件的标记：

 <template>
  <v-card class="elevation-5" fill-height>
    <v-card-title primary-title>
      <h3 class="headline mb-0">{{ name }}</h3>
    </v-card-title>

    <v-card-text>
      <div class="body-1">{{ description }}</div>
      <v-divider light style="margin-top:15px;" />
      <v-divider light />
    </v-card-text>

    <v-card-actions v-if="showButtons">
      <v-btn color="green">
        <a :href="url">VISIT</a>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<template>
  <div>
    <v-row class="ma-2">
      <v-col md="4" class="pa-3" v-for="i in items" :key="i.id">
        <Item :show-buttons="true" :item="i" />
      </v-col>
    </v-row>
  </div>
</template>

{{name}}
{{description}}

这是父组件：

 <template>
  <v-card class="elevation-5" fill-height>
    <v-card-title primary-title>
      <h3 class="headline mb-0">{{ name }}</h3>
    </v-card-title>

    <v-card-text>
      <div class="body-1">{{ description }}</div>
      <v-divider light style="margin-top:15px;" />
      <v-divider light />
    </v-card-text>

    <v-card-actions v-if="showButtons">
      <v-btn color="green">
        <a :href="url">VISIT</a>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<template>
  <div>
    <v-row class="ma-2">
      <v-col md="4" class="pa-3" v-for="i in items" :key="i.id">
        <Item :show-buttons="true" :item="i" />
      </v-col>
    </v-row>
  </div>
</template>

父项位于：

     <v-content>
      <v-container fluid ma-0 pa-0>
        <router-view />
      </v-container>
    </v-content>

请看这个屏幕，也许这会让我的蹩脚英语更容易理解

---

在文本区域设置高度和溢出：

<v-card-text style="overflow-y: auto; height:100px" >
  <div class="body-1">{{ description }}</div>
  <v-divider light style="margin-top:15px;" />
  <v-divider light />
</v-card-text>

{{description}}

---

最好使用

类

，但我在这里使用

样式

，以便于掌握。

我想您正在寻找这样的东西：

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据（）{
返回{
项目：[
{id:1，名称：'A'，描述：'Short'，showButtons:true}，
{id:2，名称：'B'，描述：'Short'，showButtons:false}，
{id:3，名称：'C'，描述：'包装到多行的较长文本'，showButtons:true}
]
}
}
})

#应用程序{
最大宽度：500px；
}

{{i.name}
{{i.description}}
参观

您只需在v行中将“对齐”属性设置为“拉伸”：

<template>
  <div>
    <v-row align="stretch" class="ma-2">
      <v-col md="4" class="pa-3" v-for="i in items" :key="i.id">
        <Item :show-buttons="true" :item="i" />
      </v-col>
    </v-row>
  </div>
</template>

如果你能把这个放在CodeSandbox上，那就太好了。谢谢。你怎么能使每条线的高度相等呢？假设你有9张卡片。每行3张卡