title: Vuetify non scrolling navigation drawer
body: <p>I have the next structure:
  In navigation drawer:
   - Tooolbar
   - Search block
   - Items list
   - Footer</p>
  
  <p>It looks so:<a href="https://i.stack.imgur.com/gdgWz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gdgWz.png" alt="enter image description here"></a></p>
  
  <p>The problem is, when i overflow items list, the scrolling is active for all navigation drawer instead of activate the items list scrolling.</p>
  
  <p>I'am trying to make items list scrollable and without fixing it height (filling remain space till footer).
  I have tried set height: 100vh for navigation drawer, but it didn't help.</p>
  
  <p>JsFiddle link <a href="https://jsfiddle.net/vxdbs65u/13/" rel="nofollow noreferrer">here</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" 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",
    data: {
     drawer: null
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;
    &lt;v-app&gt;
      &lt;!-- Navigation drawer --&gt;
      &lt;!-- It shouldn't be scrollable --&gt;
      &lt;v-navigation-drawer width="380" dark app right v-model="drawer" permanent fixed&gt;
        &lt;!-- Toolbar --&gt;
        &lt;v-toolbar light color="blue" &gt;
          &lt;v-toolbar-side-icon/&gt;
          &lt;v-toolbar-title&gt;Some&lt;/v-toolbar-title&gt;
        &lt;/v-toolbar&gt;
        
      &lt;!-- Navigation --&gt;
      &lt;v-container grid-list-md &gt;
        &lt;v-layout row wrap &gt;
  
          &lt;v-flex d-flex xs12 order-xs5&gt;
            &lt;v-layout row wrap&gt;
  
              &lt;!-- Inputs --&gt;
              &lt;v-flex d-flex&gt;
                &lt;v-layout column wrap&gt;
  
                  &lt;v-flex d-flex&gt;
                        &lt;v-text-field flat solo-inverted hide-details label="Search"/&gt;
                  &lt;/v-flex&gt;
                  
                
                &lt;/v-layout&gt;
              &lt;/v-flex&gt;
              
              &lt;!-- Icons --&gt;
              &lt;v-flex d-flex xs1&gt;
                &lt;v-layout column wrap&gt;
                     &lt;v-flex d-flex&gt;
                        &lt;v-icon &gt;search&lt;/v-icon&gt;
                    &lt;/v-flex&gt;
                &lt;/v-layout&gt;
              &lt;/v-flex&gt;
            &lt;/v-layout&gt;
          
          &lt;/v-flex&gt;
  
          &lt;/v-layout&gt;
        
        &lt;v-layout column&gt;
          &lt;v-spacer&gt;&lt;/v-spacer&gt;
          &lt;v-flex&gt;
            &lt;hr&gt;
          &lt;/v-flex&gt;
          &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;/v-layout&gt;
  
  
      &lt;!-- List items generator --&gt;
      &lt;!-- It should be scrollable --&gt;
      &lt;v-layout d-flex wrap align-space-around justify-center column fill-height style="overflow: auto"&gt;
  
          &lt;v-flex v-for="i in 50" :key="`1${i}`"&gt;
            &lt;v-card dark color="green"&gt;
              &lt;v-card-text class="px-0"&gt;1&lt;/v-card-text&gt;
            &lt;/v-card&gt;
          &lt;/v-flex&gt;
  
  
      &lt;/v-layout&gt;
      &lt;/v-container&gt;
  
      
      &lt;v-footer height="auto" color="primary lighten-1"&gt;
      &lt;v-layout justify-center row wrap&gt;
        &lt;v-flex primary lighten-2 py-3 text-xs-center white--text xs12&gt;
          &amp;copy;2018 — &lt;strong&gt;Vuetify&lt;/strong&gt;
        &lt;/v-flex&gt;
      &lt;/v-layout&gt;
    &lt;/v-footer&gt;
        
      &lt;/v-navigation-drawer&gt;
  
      &lt;v-content&gt;
        Some content
      &lt;/v-content&gt;
  
    &lt;/v-app&gt;
    &lt;/div&gt;
   
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"&gt;&lt;/script&gt;
    &lt;script&gt;
  
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>