Scrollable Data Tables using Vuetify

问题

I want to create a vue page that has two data-tables that fill half the screen (vertically). Each data table should have a scroll bar if required.

I have tried the markup below, but this does not size the data-tables to the screen size. Here is a codepen example

<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-md fill-height>
  <v-layout column>
    <v-flex md6>
      <v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </template>
      </v-data-table>
      </v-flex>
    <v-flex md6>
      <div>
      <v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </template>
      </v-data-table>
      </div>
    </v-flex>
  </v-layout>
</v-container>
</v-app>
</div>

回答1:

To acheive the result I needed to set the height to 100vh on the layout, and set overflow on each flex. I have updated the codepen in question

<div id="app">
<v-app id="inspire">
 <v-container>
  <v-layout column style="height: 90vh">       <--- added height
    <v-flex md6 style="overflow: auto">        <--- added overflow
      <v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </template>
      </v-data-table>
      </v-flex>
    <v-flex md6 style="overflow: auto">        <--- added overflow
      <v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </template>
      </v-data-table>
    </v-flex>
  </v-layout>
 </v-container>
</v-app>

来源：https://stackoverflow.com/questions/52425086/scrollable-data-tables-using-vuetify