如何防止 vuetify 导航抽屉包装内容？答案

【问题标题】：How to prevent vuetify navigation drawer wrap content?如何防止 vuetify 导航抽屉包装内容？
【发布时间】：2022-01-13 02:28:06
【问题描述】：

我正在制作一个带有两个列表的 vuetify 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>

我希望正确的列表不被包装，即使滚动条是可见的。我怎样才能做到这一点？

【问题讨论】：

您应该尝试提供一个可重现的最小示例。我认为几乎没有什么信息可以确定导致第二个列表换行的原因。一种解决方法是将position: relative 添加到容器（v-row），将position: absolute 添加到第二个列表。但这有点老套，我建议它仅作为最后的手段（最好）。但是在您的情况下应该有更好的解决方法。只是没有一个例子可以实验，我们只能尝试猜测......即使这也很难。
不要直接发布有问题的截图。

标签： javascript css vue.js vuetify.js

【解决方案1】：

我发现滚动条是由v-row生成的。

v-row的默认样式有flex-wrap: auto的属性，所以我必须修改我的v-row为style="flex-wrap: nowrap"。

现在因为没有滚动条，右边的v-col就不会再被包裹了。

【讨论】：