Select increasing width when choosing item

Question

I’m having trouble with this code:

    <v-row>          
      <v-col class="d-flex align-center" cols="12">
        <p>Situação familiar:</p>
        <v-select
          v-model="selectedFamilySituation"
          :items="itemsFamilySituation"
          solo
          dense
        ></v-select>
      </v-col>
    </v-row>

In short, I have a label followed by a select. The problem is that one of the items in select is a very large string, so every time I select this item select increases its width and is thus misaligned.

How can I fix this?

Answer 1

Guys, I got it. The label that comes before the select has a fixed size of 98px, so when I choose the item with giant string, the width of the select increases the 98px that the label occupies.

I put it on select:

style="max-width: calc(100% - 98px);"

Ready :D