Vuetify 带有滚动条的布局

Question

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

这是代码笔： 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">