I have created v-list in flex layout and the v-list fill the remaining space in horizontally in column. But if the list contains lots of element which is total height is bigger than column height then the list sticking out. I have tried to add max-height and fix height to the v-list, but then the list items sticking out from wrapper v-list. And I have tried to add v-scroll but that haven't helped.

So how can I create v-list which will be scrollable when the list has more items than can be appear in div?

I have created v-list in flex layout and the v-list fill the remaining space in horizontally in column. But if the list contains lots of element which is total height is bigger than column height then the list sticking out. I have tried to add max-height and fix height to the v-list, but then the list items sticking out from wrapper v-list. And I have tried to add v-scroll but that haven't helped.

So how can I create v-list which will be scrollable when the list has more items than can be appear in div?

• javascript
• vue.js
• vuejs2
• vue-component
• vuetify.js

• which version of vuetify you're working with? – Boussadjra Brahim Commented Jul 31, 2019 at 8:22
• version number is 1.5.5 – ZeroProcess Commented Jul 31, 2019 at 8:43

1 Answer 1

Try to add the following CSS rules :

.v-list{
  height:200px;/* or any height you want */
  overflow-y:auto
}

check this pen to see the demo