VueJS: How to scroll v-list-title - vue.js

Question

While making list screen with v-list.
I stuck scrolling v-list-title items.
I'm using VueJS and vuetifyjs.
My code snip is at below.
https://codepen.io/badsaarow/pen/aaRaxe?editors=1010
My aim is that toolbar area is fixed, and only v-list-titles are scrollable.
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-lg>
<v-layout row wrap>
<v-flex xs12 sm12 md6>
<v-card>
<v-toolbar color="light-blue" light extended>
<v-btn
fab
small
color="cyan accent-2"
bottom
right
absolute
#click="dialog = !dialog"
>
<v-icon>add</v-icon>
</v-btn>
<v-toolbar-title slot="extension" class="white--text">user list</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-list two-line>
<v-list-tile
v-for="user in users"
avatar
#click=""
>
<v-list-tile-avatar>
<v-icon :class="iconClass">face</v-icon>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>{{ user.lastName }}{{ user.firstName }}</v-list-tile-title>
<v-list-tile-sub-title>{{ user.name }}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon ripple>
<v-icon color="grey lighten-1">info</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>

Answer 1

Try to add following CSS to make v-list-titles scrollable.
.v-list {
height: 300px;
overflow-y: auto;
}
We need to specify a fixed height for our DOM object, and once we set the overflow-y attribute as auto. A scroll bar will show up once content has bigger length than parent.
Here is the modified version, have a try.

Answer 2

Just add the fixed prop to v-toolbar, as so:
<v-toolbar color="light-blue" light extended fixed>
See here for updated pen