I am making a vuetify v-navigation-drawer with two lists.

If my window has enough height, the two lists looks good like this:

But if I resize my window height to be shorter, the second list wrapped to the bottom like this image:

My drawer template is:

  <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>

I want the right list not to be wrapped, even if the scrollbar is visible. How could I achieve this?