Vuetify -显示标题和v-卡一起与全尺寸垂直

Question

<template>
<div>
<div style="height: 20px; color: yellow">
test
</div>
<v-card class="markdown-preview" tile>
<v-card-text v-html="previewText"> </v-card-text>
</v-card>
</div>
</template>

无论标题div的大小如何，v-card都应该占据div的剩余位置。我用flex试过，但是v-card要么直接在顶部，要么在底部溢出父div。有人能帮帮我吗?我花了好几个小时尝试了很多不同的选择。我唯一的解决方案是计算css属性。但是我希望这些值是可变的

Answer 1

可以使用display flex。将父节点定义为display: flex，然后将v-card定义为flex: 1。

<template>
<div style="display: flex; flex-direction: column;">
<div style="height: 20px; color: yellow">
test
</div>
<v-card class="markdown-preview" style="flex: 1;" tile>
<v-card-text v-html="previewText"> </v-card-text>
</v-card>
</div>
</template>