A simple v-list with vertical scrolling

Question

How do we add vertical scrollbar to a v-list component inside a full-height container? Having spent the better part of the day trying different things, the v-list still overflows and page becomes larger than the viewport, which isn't what I want. I'm simply trying to create a full-screen 2-columns layout. The left column will show a list of options, which could be several hundreds (hence should be scrollable), whereas the right column will show GMaps.

<v-app>
  <v-app-bar app>
    <v-toolbar-title class="headline text-uppercase">
      <span>Company Name</span>
    </v-toolbar-title>
  </v-app-bar>

  <v-content>
    <v-layout row fill-height>
      <v-flex xs4 fill-height>
        <v-list three-line>
          ...
        </v-list>
      </v-flex>
      <v-flex xs8>
        <GmapMap />
      </v-flex>
    </v-layout> 
  </v-content>
</v-app>

I have tried several combinations of fill-height, v-container and d-flex etc. with these layout nodes, but it always overflows beyond viewport height. I also recall that I have achieved this in the past without doing any custom css or js, just through built-in vuetify constructs.

Answer 1

For now I have achieved this using custom CSS, although I didn't want to go that way. Here is the solution if it helps anyone.

In your v-list, add this style:

<v-list three-line style="max-height: calc(100vh - 100px)" class="overflow-y-auto">

That 100px is the height of app navigation bar; may be a different number in your case. As I said, I don't like the solution, because I'm not sure if this will break on some screens or mobile devices, but anyway this at least works.

Vuetify should allow individual columns or divs to be scrollable. It already does that for dialogs, but v-lists and v-flex somehow do not allow a way of making them scrollable inside a full-height layout.

I'm not marking this as answer and will wait for a better solution.

Answer 2

found a simple css solution here:

.v-list {
  height: 300px;
  overflow-y: auto;
}