Vuetify容器内可滚动Sheet问题：仅Sheet滚动而非整体容器

我需要实现一个可滚动的Sheet效果：当Sheet内的条目填满后，只有黄色区域自身可滚动，但目前整个容器都会跟着滚动。黄色区域需要占满所有可用空间，所以我用了flex-grow-1，但这可能导致Sheet无法触发滚动。

核心问题是黄色区域未设置滚动规则，且父容器缺少明确的高度约束，导致flex-grow-1的元素被内容撑大，进而引发整个容器滚动。只需做两处修改：

1. 给黄色区域的v-sheet添加overflow-y-auto类（Vuetify内置类，等价于CSS的overflow-y: auto），让内容溢出时仅自身显示垂直滚动条。
2. 给灰色的父级v-sheet（flex-column布局的那个）添加height-100类，确保flex布局有确定的高度基准，让flex-grow-1能正确分配剩余空间。

修改后的完整代码：

<template>
  <v-app>
    <v-container style="height: 100%">
      <v-sheet class="d-flex" height="100%" width="100%" color="green">
        <!-- 新增height-100，确保flex-column容器有确定高度 -->
        <v-sheet class="d-flex flex-column height-100" width="300" color="grey">
          <v-sheet class="d-flex justify-center ma-2" color="transparent">
            <v-btn @click="addItem">Add Item</v-btn>
          </v-sheet>
          <!-- 新增overflow-y-auto，内容溢出时自身滚动 -->
          <v-sheet class="flex-grow-1 overflow-y-auto" color="yellow">
            <v-sheet class="mb-5" color="transparent">
              <v-list
                lines="two"
                bg-color="transparent"
                mandatory
                nav
                width="inherit"
              >
                <v-list-item
                  v-for="item in items"
                  :value="item"
                  density="compact"
                >
                  <template v-slot:prepend>
                    <v-icon
                      icon="mdi-alarm-check"
                      style="margin-inline-end: 16px"
                    />
                  </template>
                  <v-list-item-title
                    class="user-select-none"
                    :title="item.name"
                  >
                    {{ item.name }}
                  </v-list-item-title>
                  <v-list-item-subtitle
                    class="user-select-none"
                    :title="item.description"
                  >
                    {{ item.description }}
                  </v-list-item-subtitle>
                </v-list-item>
              </v-list>
            </v-sheet>
          </v-sheet>
        </v-sheet>
        <v-sheet class="ma-2" color="transparent">
          <div>
            <p>This area shouldn't be scrollable, only the yellow area.</p>
            <p class="pt-5">
              Add items until the yellow area overflows and then the whole
              container becomes scrollable
            </p>
          </div>
        </v-sheet>
      </v-sheet>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref, onMounted } from 'vue'

  const items = ref([])

  onMounted(() => {
    for (let i = items.value.length + 1; i <= 10; i++) {
      items.value.push({
        name: `Item ${i}`,
        description: 'Test description',
      })
    }
  })

  const addItem = () => {
    items.value.push({
      name: `Item ${items.value.length + 1}`,
      description: 'Test description',
    })
  }
</script>

• height-100：给flex布局的父容器设置100%高度，确保它的高度由上级绿色Sheet的100%高度确定，避免子元素被内容撑大。
• overflow-y-auto：让黄色区域在内容高度超过自身可用空间时，自动显示滚动条，且仅区域内部滚动，不会影响外部容器。

内容的提问来源于stack exchange，提问作者user616