使vuetify下拉菜单溢出抽屉

Question

我在使用vuetify下拉菜单时遇到问题，当我仅添加下拉菜单并向下滚动时，菜单中的内容就会随着滚动页面而上升。

在github上，我找到了attach作为答案，但现在它像这样位于抽屉一侧：

Vue.use(Vuetify);

new Vue({
  el: "#app",
  data: {
  	model: true,
  },
  methods: {
  	
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.1/vuetify.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.1/vuetify.min.js"></script>
<div id="app">
<v-navigation-drawer v-model="model" fixed app style="background: red;" width="100">
  <v-menu :close-on-content-click="false" offset-y attach>
    <v-btn slot="activator">Menu</v-btn>
    <v-card>
    <v-card-text style="overflow-y:auto; max-height:300px;">
			<v-list>
        <v-list-tile avatar>
          <v-list-tile-avatar>
            <img src="" alt="John">
          </v-list-tile-avatar>
          <v-list-tile-content>
            <v-list-tile-title>John some</v-list-tile-title>
            <v-list-tile-sub-title>body</v-list-tile-sub-title>
          </v-list-tile-content>

          <v-list-tile-action>
            <v-btn icon small>
              <v-icon>remove_red_eye</v-icon>
            </v-btn>
          </v-list-tile-action>
        </v-list-tile>
      <v-divider></v-divider>
      </v-list>
		</v-card-text>
    </v-card>
  </v-menu>
</v-navigation-drawer>
</div>