Why vuetify data-table stretches the whole page instead of render scroll bar?

Question

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

<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 data-table has a lot of columns and your browser width is not big (try ~1300px or even ~600px), we can't see all of it's content.

But if you go to https://vuetifyjs.com/components/data-tables, you'll see that nice horizontal scroll bar under each example.

Why it's not appearing in my codepen?

Answer 1

Looks like there may be a small bug in vuetify CSS where their layout class doesn't play nice with the table's responsiveness because it is flex.

Adding the following is one way to fix it:

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

Or you could add an additional div to contain the table without overriding the layout rules.