CODEWITHSUNDEEP
javascripthtmlcssvue.jsvuetify.js
Kevin W.
Kevin W.

Reputation: 101

Vuetify - display a header and a v-card together with full size vertically

<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>

The v-card should take the remaining place in the div, no matter which size the header div has. I tried it with flex, but the v-card is either directly on top or the its overflowing the parent div at the bottom. Can someone please help me? I tried so much different options for hours. My only solution was with calculated css properties. But I want the values to be variable.

Upvotes: 0

Views: 472

Answers (1)

Yash Maheshwari
Yash Maheshwari

Reputation: 2412

You can use display flex for this. Define the parent as display: flex and then define the v-card as 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>

Upvotes: 1

Related Questions