Why does a vuetify data table stretch the entire page instead of a scrollbar?

Question

Codepen: https://codepen.io/frutality/pen/LQRGLv (see it, because for some reason the code inserted here is truncated)

<div id="app"> <v-app> <v-navigation-drawer app fixed clipped v-model="drawer"></v-navigation-drawer> <v-toolbar app dense absolute clipped-left dark color="primary"> <v-toolbar-title> <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon> <span class="hidden-xs-only">Logo</span> </v-toolbar-title> </v-toolbar> <v-content> <v-container fluid fill-height> <v-layout> <div> <v-data-table :headers="headers" :items="titles" hide-actions disable-initial-sort class="elevation-1"> <template slot="items" slot-scope="props"> <td> {{ props.item.title }} </td> <td>{{ props.item.type }}</td> <td>{{ props.item.imdb_id }}</td> <td>{{ props.item.is_adult }}</td> <td>{{ props.item.start_year }}</td> <td>{{ props.item.end_year }}</td> <td>{{ props.item.duration }}</td> <td>{{ props.item.genres_temp }}</td> </template> </v-data-table> <div class="text-xs-right"> <v-btn color="primary" class=mr-0>Refresh</v-btn> </div> </div> </v-layout> </v-container> </v-content> </v-app> </div> 

If the data table contains many columns and your browser width is small (try ~ 1300px or even ~ 600px), we won’t be able to see all the content.

But if you go to https://vuetifyjs.com/components/data-tables , you will see this nice horizontal scrollbar in each example.

Why doesn't he appear in my codefen?

Answer 1

It looks like there might be a small bug in vuetify CSS where their layout class does not play well with table responsiveness because it is flexible.

Adding the following is one way to fix it:

 .layout { display: inline-block; width: 100%; } 

Or you can add an extra div to contain the table without overriding layout rules.