html - 溢出不显示所有内容(剪切)

Question

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

这是一个代码笔

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

我在 v-stepper-items 上应用了我的类 stepper-scrollable-content

.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