Make v-col height equal to parent v-row

Question

I have a v-row made up of 3 columns, the first of which contains an image making it the tallest. The row's height matches that of the image (and thereby the first column), but the other two columns are only as tall as their contents.

<v-row justify="center">
    <v-col cols="4" class="pb-0 pt-0 pl-3" align-self="center">
        <v-img src="..." />
    </v-col>
    <v-col cols="6" class="pb-0 pr-6 pt-0" align-self="center">
        <v-row>
            <p>New Product</p>
        </v-row>
        <v-row>
            <small>Product Name</small>
        </v-row>
    </v-col>
    <v-col cols="2" align-self="center">
        <p>B001</p>
    </v-col>

I need the final column to fill the height. Giving the col height: 100% only works if I give the v-row a fixed height value which I don't want to do as the contents can change in size. How can I achieve this?

Answer 1

将align="stretch"添加到v-row以便所有嵌套列填充行的高度。