title: How to add scrollbars to vue and vuetify
body: <p>I started with vuetify, but scrolling confuse me a lot. I added different sections and try to make it scrollable independent of each other. But either all sections are scrollable with one scrollbar or no section is scrollable.
  <a href="https://i.stack.imgur.com/eq0ib.png" rel="nofollow noreferrer">Divisions of App</a></p>
  <p>How can I make the green section scrollable? How can I make the green and the red section scrollable independent of each other?</p>
  <p>Here is the App.vue:</p>
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;v-app-bar
        app
        color=&quot;primary&quot;
        dark
      &gt;
      My Toolbar
      &lt;/v-app-bar&gt;
  
      &lt;v-main class=&quot;overflow-hidden&quot;&gt;
        &lt;v-row class=&quot;fill-height&quot;&gt;
          &lt;v-col grow class=&quot;text-center red overflow-hidden&quot;&gt;
             &lt;p&gt;Section 1, not srollable&lt;/p&gt;
          &lt;/v-col&gt;
          &lt;v-col grow class=&quot;d-flex flex-column overflow-hidden grey&quot;&gt;
            &lt;div class=&quot;text-center yellow overflow-hidden&quot;&gt;
             &lt;p&gt;Section 2, not scrollable&lt;/p&gt;
            &lt;/div&gt;
            &lt;div grow class=&quot;text-center green flex-grow-1 flex-shrink-0 overflow-auto&quot;&gt;
              &lt;div&gt;
              &lt;p&gt;Section 2, scrollable&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;text-center blue overflow-hidden&quot;&gt;
             &lt;p&gt;Section 4, not scrollable&lt;/p&gt;
            &lt;/div&gt;
          &lt;/v-col&gt;
        &lt;/v-row&gt;
      &lt;/v-main&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  &lt;script&gt;
  
  export default {
    name: 'App',
  
    components: {
      //
    },
  
    data: () =&gt; ({
      //
    }),
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  html{
    overflow: auto;
  }
  &lt;/style&gt;
  </code></pre>
  <p>Thanks in advance for help.</p>