To create a v-btn-toggle whose buttons are aligned vertically, instead of horizontally

Question

I am currently trying to create a quiz, using VueJS and Vuetify. I am trying to arrange the answers the user can select vertically. To do that, I am trying to use the v-btn-toggle component. However, the v-btn-toggle component's buttons are aligned horizontally by default. If possible, I would like to know how to arrange them vertically.

here is my layout:

<v-btn-toggle v-model="toggle_multiple" multiple>
    <v-btn>
         Answer 1
    </v-btn>
    <v-btn>
         Answer 2
    </v-btn>
    <v-btn>
         Answer 3
    </v-btn>
    <v-btn>
        Answer 4
    </v-btn>
</v-btn-toggle>

and here is my style, as recommended in this question :

.v-btn-toggle{
    flex-direction: column;
}

the answer I've tried gave me weird results, as the answers only display up to the second answer and a half, as such : my disappointment

Any help is appreciated.

edit:

I've found out my problem comes from vuetify's default css

.v-btn-group--density-default.v-btn-group {
  height: 48px;
}

And it's preventing me from making a group button that's more than 48 pixels in height.

I didn't want to change vuetify's default settings (for portability issues), so now I am trying to override the default css. Unfortunately, even though i've added css of my own, the page still uses vuetify's css over mine as shown in this image

Answer 1

OP found that Vuetify has some default 48 pixels height.
After double-checking that the whole thing works as expected regarding flexbox, we narrowed it down to overriding the default values locally thanks to CSS specificity.

OP has a working solution by targeting the given button with

#my-button-group {
  height: auto;
}

Another alternative could be to use button.v-btn-group--density-default.v-btn-group.