Why do hidden elements change the size of vuetify select? (conditional rendering)

I have a vuetify select where I want to restrict the text when too many elements are selected.

So I used conditional rendering to just display what I want:

<v-col cols="auto">
  <v-select label="Select" :items="items" hide-details v-model="selectedItems" multiple>
    <template v-slot:selection="{ index, item }">
      <div v-if="allSelected">
        <v-chip v-if="index == 0">All selected</v-chip>
      </div>
      <div v-else-if="selectedItems.length > 1">
        <v-chip v-if="index == 0">{{selectedItems.length}} selected</v-chip>
      </div>
      <div v-else>
        <v-chip v-if="index == 0">One selected</v-chip>
      </div>
    </template>
  </v-select>
</v-col>

As you can see, there are just 3 branches (all, some, one), each displays only one v-chip. But depending on the number of items selected, the select needs more or less space.

When changing cols to a specific number, the height increases when there isn't enough space.

Playground

Here is the playground where you can see that the select changes the size depending on the number of elements.

The divs for each item are still created, just with width/height 0.

The parent .v-field__input defines column-gap: 2px;, meaning that each of those 0px divs will be separated by 2px, which is why the input grows when you add elements (by 2px for each element). Similarly, there is a margin-inline-end: 2px; defined on the divs.

Just override those rule to stop the select from growing with the number of selected items (assuming a custom my-select class set on the v-select):

.my-select .v-field__input {
  column-gap: unset;
}
.my-select.v-select .v-field--dirty .v-select__selection {
  margin-inline-end: unset;
}

Have a look at the playground.