带滚动条的Vuetify布局

Question

我有一个问题，我无法解决vue和vuetify。我有2行，上排是固定大小，因为那里的数据是固定的。但是在第2行我有2列是数据表，数据可能很长，但我想显示所有，而不只是几行。所以我想实现，当下排高于窗口高度时，滚动条就会出现在v-flex / v-card中。

这是codepen：https://codepen.io/anon/pen/mgKERm

<div id="app" style="height:100vh">
  <v-container fill-height>
    <v-layout column>
      <v-flex style="background-color:red" fill-height>
        <v-card class="ma-3">
          <v-data-table :items="items" hide-actions>
            <template v-slot:items="props">
              <td>{{props.item.name}}</td>
              <td>{{props.item.value}}</td>
            </template>
          </v-data-table>
        </v-card>
      </v-flex>
      <v-flex xs12>
        <v-layout row fill-height>
          <v-flex xs6 style="background-color:blue" fill-height>
            <v-card class="ma-3">
              <v-data-table :items="longerItem" hide-actions>
                <template v-slot:items="props">
              <td>{{props.item.name}}</td>
              <td>{{props.item.value}}</td>
            </template>
              </v-data-table>
            </v-card>
          </v-flex>
          <v-flex xs6 style="background-color:green" fill-height>
            <v-card class="ma-3">
              <v-data-table :items="longerItem" hide-actions>
                <template v-slot:items="props">
              <td>{{props.item.name}}</td>
              <td>{{props.item.value}}</td>
            </template>
              </v-data-table>
            </v-card>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-container>
</div>

另一个问题是它没有响应。调整大小时，第2行第2列不会进入第2行第1列。

有人可以帮助我吗？

谢谢！

Answer 1

您可以将overflow：auto添加到代码的第14行。我希望我的问题是正确的。 （或者你可以在你的CSS中添加一个类并使用它而不是直接使用样式）

          <v-flex xs12 style="overflow:auto">