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

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