title: Vuetify: scroll list inside card
body: <p>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:</p>
  
  <p><a href="https://jsfiddle.net/Feofilakt/0Lnzteqm/" rel="noreferrer">https://jsfiddle.net/Feofilakt/0Lnzteqm/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.use(Vuetify);
  
  var vm = new Vue({
    el: "#app",
    methods: {},
    data: {}
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.css" rel="stylesheet"/&gt;
  
  &lt;div id="app"&gt;
    &lt;v-app&gt;
      &lt;v-card height="400px"&gt;
        &lt;v-toolbar card&gt;
          &lt;v-toolbar-title&gt;Title&lt;/v-toolbar-title&gt;
        &lt;/v-toolbar&gt;
  
        &lt;v-divider&gt;&lt;/v-divider&gt;
  
        &lt;v-card-text&gt;
          &lt;v-list&gt;
            &lt;template v-for="i in 40"&gt;
              &lt;v-list-tile&gt;
                &lt;v-list-tile-content&gt;
                  &lt;div&gt;{{ i }}&lt;/div&gt;
                &lt;/v-list-tile-content&gt;
              &lt;/v-list-tile&gt;
            &lt;/template&gt;
          &lt;/v-list&gt;
  
          &lt;v-footer&gt;
            &lt;div&gt;Footer&lt;/div&gt;
          &lt;/v-footer&gt;
        &lt;/v-card-text&gt;
      &lt;/v-card&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>