溢出不显示所有内容（剪切）

Question

我正在使用vuetify，我想在对话框中制作一个可滚动的stepper。

这是一个codepen

https://codepen.io/anon/pen/OqWQdy

我把我的班级stepper-scrollable-content应用于v-stepper-items

.stepper-scrollable-content {
  overflow: auto;
  max-height: 200px;
}


<v-stepper-items class="stepper-scrollable-content">
  <v-stepper-content step="1">
    ...
  </v-stepper-content>
</v-stepper-items>

问题是当我在移动设备上或当我垂直调整浏览器窗口大小时，溢出不会显示所有内容。我看不到所有表格输入。溢出被削减。

我该如何解决？

Answer 1

如果你想限制你的.v-card.的高度，你需要在.v-card本身上做到这一点：

.stepper-scrollable-content {
   overflow: auto;
   max-height: calc(100% - 71px);
}
.v-card {
   max-height: 340px;
}

更新了笔：https://codepen.io/andrei-gheorghiu/pen/wOgXYM