Vuetify：卡片内的滚动列表

Question

如何设置正确大小的 vuetify 卡片内容以启用滚动？不幸的是，vuetify 文档只显示了最简单的案例，没有看起来像真实的数据。这是卡片内的列表和页脚：

https://jsfiddle.net/Feofilakt/0Lnzteqm/

Vue.use(Vuetify);

var vm = new Vue({
  el: "#app",
  methods: {},
  data: {}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.css" rel="stylesheet"/>

<div id="app">
  <v-app>
    <v-card height="400px">
      <v-toolbar card>
        <v-toolbar-title>Title</v-toolbar-title>
      </v-toolbar>

      <v-divider></v-divider>

      <v-card-text>
        <v-list>
          <template v-for="i in 40">
            <v-list-tile>
              <v-list-tile-content>
                <div>{{ i }}</div>
              </v-list-tile-content>
            </v-list-tile>
          </template>
        </v-list>

        <v-footer>
          <div>Footer</div>
        </v-footer>
      </v-card-text>
    </v-card>
  </v-app>
</div>

Answer 1

你可以用 css

解决这个问题

HTML

<v-card height="400px" class="scroll">
  .....
</v-card>

CSS

.scroll {
   overflow-y: scroll
}

Answer 2

找到解决办法。需要将 flexbox 样式应用于 v-card 组件的部分：

Vue.use(Vuetify);

var vm = new Vue({
  el: "#app",
  methods: {},
  data: {}
});

html {
  overflow: hidden !important;
}

.v-card {
  display: flex !important;
  flex-direction: column;
}

.v-card__text {
  flex-grow: 1;
  overflow: auto;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-card height="200px">
      <v-toolbar card>
        <v-toolbar-title>Title</v-toolbar-title>
      </v-toolbar>

      <v-divider></v-divider>

      <v-card-text>
        <v-list>
          <template v-for="i in 40">
            <v-list-tile>
              <v-list-tile-content>
                <div>{{ i }}</div>
              </v-list-tile-content>
            </v-list-tile>
          </template>
        </v-list>
      </v-card-text>

      <v-footer class="pa-2">Footer</v-footer>
    </v-card>
  </v-app>
</div>

Vuetify：卡片内的滚动列表

Vuetify: scroll list inside card

vue.js

vuetify.js