如何限制Vuetify扩展面板高度，避免标题溢出父容器？

核心思路是通过Flex布局控制父容器内的面板空间分配，同时给展开的面板内容区域设置滚动属性，确保未展开的面板标题始终留在容器可视范围内，展开的内容可独立滚动查看。

实现代码 #

<template>
  <div class="parent-container">
    <v-expansion-panels class="expansion-panels">
      <v-expansion-panel v-for="item in items" :key="item.title">
        <v-expansion-panel-title>{{ item.title }}</v-expansion-panel-title>
        <v-expansion-panel-content class="scrollable-content">
          <div v-for="text in item.content" :key="text">{{ text }}</div>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </div>
</template>

<script setup>
const items = [
  {
    title: '面板1',
    content: Array.from({length: 20}, (_, i) => `内容行 ${i+1}`)
  },
  {
    title: '面板2',
    content: Array.from({length: 20}, (_, i) => `内容行 ${i+1}`)
  },
  {
    title: '面板3',
    content: Array.from({length: 20}, (_, i) => `内容行 ${i+1}`)
  }
]
</script>

<style scoped>
.parent-container {
  height: 500px; /* 固定父容器高度，可根据需求调整 */
  display: flex;
  flex-direction: column;
}

.expansion-panels {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: visible; /* 禁止父面板容器滚动，将滚动逻辑交给内容区 */
}

.v-expansion-panel {
  flex-shrink: 0; /* 确保未激活的面板标题不会被压缩消失 */
}

.v-expansion-panel--active {
  display: flex;
  flex-direction: column;
  flex: 1; /* 让激活的面板自动填充父容器剩余空间 */
}

.scrollable-content {
  flex: 1;
  overflow-y: auto; /* 内容超出分配高度时自动显示滚动条 */
  max-height: calc(100% - 48px); /* 减去面板标题高度，避免内容覆盖标题 */
}
</style>

关键逻辑说明 #

1. 父容器Flex布局：通过display: flex和flex-direction: column让内部面板垂直排列，实现空间的自动分配。
2. 激活面板占满剩余空间：给激活状态的面板添加flex: 1，使其自动填充父容器剩余高度，未激活的面板标题保持原位不被挤出。
3. 内容区独立滚动：给面板内容容器设置overflow-y: auto，当内容超出分配高度时自动生成滚动条，max-height确保内容不会覆盖面板标题。
4. 禁止面板标题压缩：flex-shrink: 0保证未展开的面板标题不会被压缩消失，始终保持可视状态。

之前尝试无效的原因 #

• 直接设置max-height: 100%未考虑Flex布局的空间分配逻辑，面板会自然撑开父容器导致溢出。
• 给v-panel-title设置固定定位破坏了扩展面板的内部布局结构，导致交互功能失效。

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