Scrollable card content with Vuetify

Question

Hello I am trying to create scrollable content in card with flex util classes and components of Vuetify but I am unsuccessful. He is my last version of code which I tried:

https://codesandbox.io/embed/sharp-kilby-g3e4t?fontsize=14&hidenavigation=1&theme=dark

This is my expectation is this:

I found some samples with pure flex but I am not able did it with Vuetify? Can you help me edit codesandbox to make it working? Thank you.

Answer 1

This question is much related to CSS than Vuetify, so let me explain you how you can fix it. Say that your markups render in the browser like below html, either style v-card__text or add your custom class my-list, if you are using v-card__text to style then make sure to add scoped to style tag in your component else this will effect entire project.

<div class="v-card v-sheet theme--light">
  <div class="v-card__title">You Title goes here</div>
  <div class="v-card__text my-list">
    <ul>
      <li>Text</li>
      ...
    </ul>
  </div>
</div>

<style scoped>
  .my-list {
    // For eg. here 200px is MainNavBar + TitleBar and some padding/margins
    // keep on increasing height if you have more items placed above the v-card
    height: calc(100vh - 200px);
    overflow-y: auto;
  }
</style>