如何在vuetify上的模式对话框中添加垂直滚动条？

<template>
  <v-dialog v-model="dialog" max-width="500px">
    <v-card>
      <v-card-title>
        Dialog Title
      </v-card-title>
      <v-card-text>
        <div class="scrollable-content">
          <!-- 添加需要滚动的内容 -->
          <!-- 例如： -->
          <p>Content 1</p>
          <p>Content 2</p>
          <p>Content 3</p>
          <p>Content 4</p>
          <p>Content 5</p>
          <!-- ... -->
        </div>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<template>
  <v-dialog v-model="dialog" max-width="500px">
    <v-card>
      <v-card-title>
        Dialog Title
      </v-card-title>
      <v-card-text>
        <div class="scrollable-content" v-scroll-y>
          <!-- 添加需要滚动的内容 -->
          <!-- 例如： -->
          <p>Content 1</p>
          <p>Content 2</p>
          <p>Content 3</p>
          <p>Content 4</p>
          <p>Content 5</p>
          <!-- ... -->
        </div>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<style>
  .scrollable-content {
    height: 300px; /* 设置容器的高度 */
    overflow-y: auto; /* 启用垂直滚动条 */
  }
</style>