Vue.js 使用 Vuetify 的可滚动数据表

我想创建一个vue页面，其中有两个数据表(垂直)占据半个屏幕.如果需要，每个数据表都应该有一个滚动条.

我try 了下面的标记，但这并没有将数据表调整到屏幕大小.这是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>