如何防止 vuetify 導航抽屜包裝內容？

Question

我正在制作一個帶有兩個列表的 vuetify v-navigation-drawer 。

如果我的 window 有足夠的高度，這兩個列表看起來不錯：

但是，如果我將 window 高度調整為更短，第二個列表會像這張圖片一樣包裹到底部：

我的抽屜模板是：

  <v-navigation-drawer
    id="nav1"
    permanent
    clipped
    app
    :width="drawerWidth"
  >
    <v-row class="fill-height" no-gutters>
      <v-col>
        <v-navigation-drawer id="nav2" permanent :mini-variant="isMiniVariant">
          <v-list>
            <v-list-item-group v-model="selectedId" mandatory>
              <v-list-item
                v-for="(item, i) in mainItems"
                :key="i"
              >
                <v-list-item-icon>
                  <v-icon>{{ item.icon }}</v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title v-text="item.name" />
                </v-list-item-content>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-navigation-drawer>
      </v-col>
      <v-col>
          <v-list
            width="56px"
            style="background-color: darkred"
          >
            <v-list-item-group>
              <v-list-item
                v-for="(s, index) in subFunctions"
                :key="s.name"
                :value="index"
                style="padding-left: 0px; padding-right: 0px"
              >
                <v-icon style="margin: 16px">{{ s.icon }}</v-icon>
              </v-list-item>
            </v-list-item-group>
          </v-list>
      </v-col>
    </v-row>
  </v-navigation-drawer>

我希望不包裝正確的列表，即使滾動條可見。 我怎么能做到這一點？

Answer 1

我發現滾動條是由v-row生成的。

v-row的默認樣式具有flex-wrap: auto屬性，因此我必須修改我的v-row以使其具有style="flex-wrap: nowrap" 。

現在由於沒有滾動條，右邊的v-col將不再被包裹。