Estoy haciendo un vuetify v-navigation-drawer con dos listas.
Si mi ventana tiene suficiente altura, las dos listas se ven bien así:
Pero si cambio el tamaño de la altura de mi ventana para que sea más corta, la segunda lista se ajusta al final como esta imagen:
Mi plantilla de cajón es:
<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>Quiero que la lista correcta no se ajuste, incluso si la barra de desplazamiento está visible. ¿Cómo podría lograr esto?
Descubrí que la barra de desplazamiento es generada por v-row .
El estilo predeterminado de v-row tiene un atributo de flex-wrap: auto , por lo que tengo que modificar mi v-row para que tenga style="flex-wrap: nowrap" .
Ahora, dado que no hay barra de desplazamiento, el v-col derecho ya no se ajustará.