如何防止旅游导航抽屉包装内容？

Question

我正在用两个列表制作一个名为v-navigation-drawer的网站。

如果我的窗口有足够的高度，这两个列表看起来很好：

​

​

但是，如果我将窗口的高度调整为更短，那么第二个列表就会像下面的图像那样被包装到底部：

​

​

我的抽屉模板是：

  <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将不再包装。