Vuetify non scrolling navigation drawer

问题

I have the next structure: In navigation drawer: - Tooolbar - Search block - Items list - Footer

It looks so:

The problem is, when i overflow items list, the scrolling is active for all navigation drawer instead of activate the items list scrolling.

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.

JsFiddle link here

Vue.use(Vuetify);

var vm = new Vue({
	el: "#app",
  data: {
  	drawer: null
  }
});

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
  <v-app>
    <!-- Navigation drawer -->
    <!-- It shouldn't be scrollable -->
    <v-navigation-drawer width="380" dark app right v-model="drawer" permanent fixed>
      <!-- Toolbar -->
      <v-toolbar light color="blue" >
        <v-toolbar-side-icon/>
        <v-toolbar-title>Some</v-toolbar-title>
      </v-toolbar>
      
    <!-- Navigation -->
    <v-container grid-list-md >
      <v-layout row wrap >

        <v-flex d-flex xs12 order-xs5>
          <v-layout row wrap>

            <!-- Inputs -->
            <v-flex d-flex>
              <v-layout column wrap>

                <v-flex d-flex>
                      <v-text-field flat solo-inverted hide-details label="Search"/>
                </v-flex>
                
              
              </v-layout>
            </v-flex>
            
            <!-- Icons -->
            <v-flex d-flex xs1>
              <v-layout column wrap>
                   <v-flex d-flex>
                      <v-icon >search</v-icon>
                  </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>
        
        </v-flex>

        </v-layout>
      
      <v-layout column>
        <v-spacer></v-spacer>
        <v-flex>
          <hr>
        </v-flex>
        <v-spacer></v-spacer>
      </v-layout>


    <!-- List items generator -->
    <!-- It should be scrollable -->
    <v-layout d-flex wrap align-space-around justify-center column fill-height style="overflow: auto">

        <v-flex v-for="i in 50" :key="`1${i}`">
          <v-card dark color="green">
            <v-card-text class="px-0">1</v-card-text>
          </v-card>
        </v-flex>


    </v-layout>
    </v-container>

    
    <v-footer height="auto" color="primary lighten-1">
    <v-layout justify-center row wrap>
      <v-flex primary lighten-2 py-3 text-xs-center white--text xs12>
        &copy;2018 — <strong>Vuetify</strong>
      </v-flex>
    </v-layout>
  </v-footer>
      
    </v-navigation-drawer>

    <v-content>
      Some content
    </v-content>

  </v-app>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  <script>

  </script>
</body>
</html>

回答1:

Edit the v-layout of items to be like below:

<v-layout d-flex align-space-around justify-center column class="items">

And add this css:

.items {
    max-height: 200px;
    overflow: auto;
}

来源：https://stackoverflow.com/questions/52384666/vuetify-non-scrolling-navigation-drawer

标签

css

Vue.js

scroll

vuejs2

vuetify.js