Css Vuetify 抽屉标签溢出zindex

我正在try 实现一个Vuetify2的侧边栏可扩展菜单，如文档中所示，然而，经过几个小时的挣扎和try 文档中建议的不同选项，无法找到一种方法来使扩展菜单溢出并显示在所有其他项目之上.

当前的行为会推开所有内容，并导致它翻到下一行，而且最好不要扩展侧边栏，不要弄乱页面元素.

下面是抽屉组件的模板:

    <v-card>
      <v-navigation-drawer
        v-model="drawer"
        :mini-variant.sync="mini"
        permanent
      >
        <v-list>
          <v-list-item class="px-2">
            <v-list-item-avatar>
              <v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
            </v-list-item-avatar>
            <v-spacer></v-spacer>
            <v-btn
              icon
              @click.stop="mini = !mini"
            >
              <v-icon>mdi-chevron-left</v-icon>
            </v-btn>
          </v-list-item>

          <v-list-item>
            <v-list-item-content>
              <v-list-item-title class="text-h6">
                {{ $auth.user?.name }}
              </v-list-item-title>
              <v-list-item-subtitle>{{ $auth.user.email }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>

和父零部件模板:

    <v-app>
     <div class="row">
       <navbar @change-tab="changeTab" :items="items">
       </navbar>
       <div class="container">
         <other custom components>
       </div>
     </div>
    <v-app>

我已经try 在.v-navigation-drawer上覆盖z-index和overflow(y/x/和两者).也try 了用同样的方式包装V卡，但仍然没有joy.