Vuetify中v-card嵌套在v-stepper内展开时显示不全问题

问题出在两层样式冲突：

• Vuetify 垂直模式下的v-stepper-content组件默认自带overflow: hidden属性，同时初始高度是按未展开状态的内容计算的，超出容器范围的内容会被直接裁剪
• 你自定义的.v-card--reveal样式给展开内容设置了position: absolute，导致展开部分完全脱离文档流，外层卡片不会随展开内容撑高；在stepper外部使用时上层容器没有裁剪溢出所以显示正常，放到stepper内部后超出stepper内容区高度的部分直接被隐藏，就出现了只显示部分内容的情况

1. 调整卡片组件的定位样式 #

首先修改卡片组件内的样式，去掉展开内容的绝对定位，让它回到正常文档流中，同时删掉展开卡片上写死的内联高度样式：

1. 把展开的v-card上的内联样式style="height: 100%;"删除
2. 替换原有的.v-card--reveal样式，同时给外层卡片加溢出可见配置：

.v-card--reveal {
  opacity: 1 !important;
  position: relative;
  width: 100%;
}
/* 外层卡片配置 */
.v-card.mx-auto {
  position: relative;
  overflow: visible;
}

2. 覆盖Stepper内容区的默认样式 #

给所有v-stepper-content节点添加自定义类，覆盖默认的溢出隐藏和固定高度逻辑：

<!-- 每个v-stepper-content都加上stepper-content-wrap类 -->
<v-stepper-content step="1" class="stepper-content-wrap">
  <Card1 />
</v-stepper-content>
<v-stepper-content step="2" class="stepper-content-wrap">
  <Card2 />
</v-stepper-content>
<v-stepper-content step="3" class="stepper-content-wrap">
  <Card2 />
</v-stepper-content>

在Stepper组件的样式中添加如下规则：

.stepper-content-wrap {
  overflow: visible !important;
  height: auto !important;
}

3. 可选优化 #

如果切换步骤时出现高度跳变，可以给根节点v-stepper添加flat属性去掉默认阴影，或者把卡片展开动画时长和stepper切换的动画时长调整为一致，避免高度计算错位。

改完后点击展开按钮时，展开内容会正常撑开父卡片高度，stepper内容区也会随卡片高度自适应，不会再出现内容被裁剪的问题。

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