У меня следующая структура: В навигационном ящике: - Tooolbar - Блок поиска - Список предметов - Нижний колонтитул
Выглядит так: 
Проблемакогда я переполняю список элементов, прокрутка активна для всех ящиков навигации вместо активации прокрутки списка элементов.
Я пытаюсь сделать список элементов прокручиваемым и не фиксировать его высоту (заполнение остается пробелом до нижнего колонтитула).Я пробовал установить высоту: 100vh для навигационного ящика, но это не помогло.
JsFiddle link здесь
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>
©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>