Vuetify: scroll list inside card

Question

How to set the right size of vuetify card's content to enable scrolling? Unfortunatly, vuetify documentation shows only the simplest cases with not real-looking data. Here is list and footer inside card:

https://jsfiddle.net/Feofilakt/0Lnzteqm/

Vue.use(Vuetify);

var vm = new Vue({
  el: "#app",
  methods: {},
  data: {}
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>

<div id="app">
  <v-app>
    <v-card height="400px">
      <v-toolbar card>
        <v-toolbar-title>Title</v-toolbar-title>
      </v-toolbar>

      <v-divider></v-divider>

      <v-card-text>
        <v-list>
          <template v-for="i in 40">
            <v-list-tile>
              <v-list-tile-content>
                <div>{{ i }}</div>
              </v-list-tile-content>
            </v-list-tile>
          </template>
        </v-list>

        <v-footer>
          <div>Footer</div>
        </v-footer>
      </v-card-text>
    </v-card>
  </v-app>
</div>

use a class to add overflow hidden property to the v-card element and give overflow-y: scroll property to v-card-text — AKASH PANDEY
I've added the fiddle, could you please apply your suggestion to it? — Feofilakt

Feofilakt Feofilakt · Accepted Answer · 2020-09-21T08:14:25

Found a solution. Need to apply flexbox styles to parts of v-card component:

Vue.use(Vuetify);

var vm = new Vue({
  el: "#app",
  methods: {},
  data: {}
});

html {
  overflow: hidden !important;
}

.v-card {
  display: flex !important;
  flex-direction: column;
}

.v-card__text {
  flex-grow: 1;
  overflow: auto;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-card height="200px">
      <v-toolbar card>
        <v-toolbar-title>Title</v-toolbar-title>
      </v-toolbar>

      <v-divider></v-divider>

      <v-card-text>
        <v-list>
          <template v-for="i in 40">
            <v-list-tile>
              <v-list-tile-content>
                <div>{{ i }}</div>
              </v-list-tile-content>
            </v-list-tile>
          </template>
        </v-list>
      </v-card-text>

      <v-footer class="pa-2">Footer</v-footer>
    </v-card>
  </v-app>
</div>

Vuetify: scroll list inside card

2 Answers