Vuetify - 垂直显示标题和 v-card 以及全尺寸

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。 将 parent 定义为 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>