[Vuejs]-How can I constrain the height of a Vuetify Expansion Panel such that the panel title doesn't overflow parent?

by

1👍

If you always have the same numbers of panels you can do like this :

.v-expansion-panel-text__wrapper {
    max-height: calc(300px - 64px - (2 * 48px));
}

The 48px correspond to inactive panels title height : https://vuetifyjs.com/en/api/v-expansion-panel/#sass-expansion-panel-title-min-height

The 64px correspond to active panel title height : https://vuetifyjs.com/en/api/v-expansion-panel/#sass-expansion-panel-active-title-min-height

(if you’re working with sass you can use Vuetify sass variables)

👤Adri

Leave a comment