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

Question

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

这是一个codepen

我在 v-stepper-items

上应用了 class 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>

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

我该如何解决？

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

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

Overflow doesn't show all the content (cut)

html

css

overflow

vuetify.js