How to make cards have the same height? - vue.js

Question

My card hights is not displaying consistently as I intended. I was thinking to set the max-height to my v-card-text
<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>
I see no effect
Any suggestions for me ?

Answer 1

You can achieve it with:
.v-card-text {
height: 200px;
overflow-y: auto;
}
If you don't want a scrollbar and you're fine with the text being cropped:
overflow-y: hidden;
Shortcomings:
.v-card-text will always have this height, even if all items on a row end up not using all of it
you might want to customise the scrollbar appearance on browsers which display a wide scrollbar (17px) on desktop (e.g: Chrome).
Alternatively, if you want the tallest card in each row to set the height (resulting in rows with cards of different heights) and not have any overflow, but have some white space on some cards instead, I can help you achieve it if you create a runnable snippet, so I can test. In principle, you need to give the card container display: flex; flex-direction: column; and give .v-card-text { flex-grow: 1 }.
In practice, the card might have more than one wrapper, which is why I need to see a live snippet, if you're interested in this solution.