Vuetify flexibleAndCard full-height with scroll

Question

I'm trying to replicate the layout of a Flexible toolbar and card toolbar as shown in https://vuetifyjs.com/en/components/toolbars#example-flexible-and-card, but I want the card content grow up to full screen height, and then scroll its content.

I could make it scroll here https://codepen.io/anon/pen/rvwNbr, but I had to set a fixed max-height in pixels:

<v-card-text style="max-height: 250px; overflow-y: scroll">

我想要的是卡片可以在开始滚动之前长到最大高度。然后，根据https://vuetifyjs.com/en/layout/grid，我尝试将外部v-card包裹在带有“ fill-height”属性的v-content中，但是没有用

有什么建议么？

Answer 1

这当然不是最好的解决方案，但它可能会推动您走向正确的方向。
使用所有弹性盒的解决方案会更好，但我似乎无法让它与弹性盒一起使用。

<template>
  <v-app id="inspire">
    <v-card flat class="fill-height">
      <v-toolbar color="primary" dark extended flat>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </v-toolbar>

      <v-card class="mx-auto card--flex-toolbar" max-width="700">
        <v-toolbar flat>
          <v-toolbar-title class="grey--text">Title</v-toolbar-title>

          <v-spacer></v-spacer>

          <v-btn icon>
            <v-icon>mdi-magnify</v-icon>
          </v-btn>
        </v-toolbar>
        <v-divider></v-divider>
        <v-card-text class="card-body">
          <p v-for="p in 30" :key="p">article paragraph {{ p }}....</p>
        </v-card-text>
      </v-card>
    </v-card>
  </v-app>
</template>

<script>
export default {};
</script>

<style>
.card--flex-toolbar {
  margin-top: -62px;
}
.card-body {
  overflow-y: auto;
  max-height: 85vh;
}
</style>

在此处查看代码和框中layout.vue的内容。v-card-text 将下降到屏幕底部，然后开始滚动内容。随意更改 v-for 循环中的值并观察卡片的增长/缩小。