如何让Vuetify中的v-card卡片保持相同高度？

问题复现 #

原有实现代码：

<v-col cols="3" v-for="note in notes">
    <v-card :loading="loading" max-width="374">
        <template slot="progress">
            <v-progress-linear color="deep-purple" height="10" indeterminate></v-progress-linear>
        </template>

        <v-img height="250" :src="note.img"></v-img>

        <v-card-title>{{ note.name }}</v-card-title>

        <v-card-text height="200px">
            <div>{{ note.description }}</div>
        </v-card-text>

        <v-card-text>
            <v-chip-group v-model="selection" active-class="deep-purple accent-4 white--text" column>
                <v-chip v-for="tag in note.tag">
                    {{ tag }}
                </v-chip>
            </v-chip-group>
        </v-card-text>
    </v-card>
</v-col>

失效原因 #

直接在v-card-text标签上写height="200px"不生效，核心原因是**v-card-text组件没有内置height属性**，写在标签上的这个属性不会被解析为CSS样式，只会作为无效自定义属性挂在DOM节点上，自然控制不了元素高度。
卡片高度参差不齐的本质是循环渲染时，不同卡片的描述文本长度、标签数量不一致，内容自适应撑开容器，导致同排卡片高度不对齐。

解决方法 #

• 快速修复方案：给v-card-text通过style或者自定义class绑定样式，不要直接把height当组件属性写

<!-- 内联样式写法，直接生效 -->
<v-card-text style="height: 200px; overflow-y: auto;">
    <div>{{ note.description }}</div>
</v-card-text>

加overflow-y: auto是为了文本超长时自动显示滚动条，避免内容溢出撑破容器

• 更稳妥的布局方案：用flex布局让所有卡片自动等高，不需要硬编码文本区高度
  1. 给循环的v-col加d-flex类，让列本身变成弹性容器
  2. 给v-card加w-100类让卡片撑满列宽，可根据设计需求设置固定卡片高度
  3. 给描述区的v-card-text加flex-grow-1类，让它自动占满卡片剩余空间，标签区自动靠底部对齐
     参考代码：

<v-col cols="3" v-for="note in notes" class="d-flex">
    <v-card :loading="loading" max-width="374" class="w-100" height="620">
        <template slot="progress">
            <v-progress-linear color="deep-purple" height="10" indeterminate></v-progress-linear>
        </template>

        <v-img height="250" :src="note.img"></v-img>

        <v-card-title>{{ note.name }}</v-card-title>

        <v-card-text class="flex-grow-1 overflow-y-auto">
            <div>{{ note.description }}</div>
        </v-card-text>

        <v-card-text>
            <v-chip-group v-model="selection" active-class="deep-purple accent-4 white--text" column>
                <v-chip v-for="tag in note.tag">
                    {{ tag }}
                </v-chip>
            </v-chip-group>
        </v-card-text>
    </v-card>
</v-col>

• 不想写死卡片高度的话，直接给外层包裹的v-row加align-stretch d-flex类，再给每个v-card加h-100类，同排卡片会自动和最高的卡片保持高度一致，只需要给文本区加overflow-hidden或者overflow-y-auto避免超长内容溢出即可。

内容的提问来源于stack exchange，提问作者code-8