Vuetify flexibleAndCard full-height with scroll

Question

I'm trying to replicate the layout of a Flexible toolbar and card toolbar as shown in https://vuetifyjs.com/en/components/toolbars#example-flexible-and-card, but I want the card content grow up to full screen height, and then scroll its content.

I could make it scroll here https://codepen.io/anon/pen/rvwNbr, but I had to set a fixed max-height in pixels:

<v-card-text style="max-height: 250px; overflow-y: scroll">

what I wanted is that the card could grow up to full height before starts scrolling. then, I tried wraping the external v-card in a v-content with "fill-height" attribute, according to https://vuetifyjs.com/en/layout/grid but it didn't work

any suggestions?

I'd also love to know the answer to this. I've tried various configurations, such as setting the max-height to 100vh, but I can't achieve a component that grows to full screen and then starts overflowing and displaying a scrollbar. — AnonymousAngelo

discolor discolor · Accepted Answer · 2020-02-04T18:50:00

This isn't the best solution for sure but it might nudge you in the right direction.
A solution using all flexboxes would be way better but I can't seem to get it to work with flexboxes..

<template>
  <v-app id="inspire">
    <v-card flat class="fill-height">
      <v-toolbar color="primary" dark extended flat>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </v-toolbar>

      <v-card class="mx-auto card--flex-toolbar" max-width="700">
        <v-toolbar flat>
          <v-toolbar-title class="grey--text">Title</v-toolbar-title>

          <v-spacer></v-spacer>

          <v-btn icon>
            <v-icon>mdi-magnify</v-icon>
          </v-btn>
        </v-toolbar>
        <v-divider></v-divider>
        <v-card-text class="card-body">
          <p v-for="p in 30" :key="p">article paragraph {{ p }}....</p>
        </v-card-text>
      </v-card>
    </v-card>
  </v-app>
</template>

<script>
export default {};
</script>

<style>
.card--flex-toolbar {
  margin-top: -62px;
}
.card-body {
  overflow-y: auto;
  max-height: 85vh;
}
</style>

Check out the layout.vue in the codesandbox here. The v-card-text will go down to the bottom of the screen and then starts scrolling the content. Feel free to change the value in the v-for loop and watch the card grow/shrink.

Vuetify flexibleAndCard full-height with scroll

1 Answers