Переполнение не показывает весь контент (вырезать)

Question

Я использую vuetify и хочу сделать прокручиваемый шаговый внутри диалога.

Вот кодекс

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