Vuetify v-select inside of a flexbox container has an empty input that stretches out the dropdown

Question

I am having an issue with a v-select from Vuetify appearing much wider than it should when inside of a container that has display: flex set due to an empty input stretching the dropdown out.

Here is a screenshot of the input in question taking up space:

Below is a working code snippet displaying the issue. When the dropdowns container is much larger - like the full width of a screen - the issue gets much more exaggerated and the dropdown may take up tons of space and the text might only be a small portion of it.

What I am trying to do is have the dropdown be the size of the largest text that fits inside of the dropdown, in this case "apple".

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      product: {},
      products: [{title: 'apple', upc: '123'}],
    }
  },
  created() {
    this.product = this.products[0];
  },
})

.app-container {
  display: flex;
}

.message {
  width: 200px;
}

input {
  height: 100%;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app id="inspire">
     <div class="app-container">
      <div>
      <v-select
        hide-details
        dense
        attach
        outlined
        return-object
        v-model="product"
        :items="products"
        item-text="title"
      ></v-select>
      </div>
      <div class="message">Why is there a sibling <code>input</code> element next to the element that contains <code>apple</code> that takes up a bunch of space? I only want the dropdown as wide as the longest text in the dropdown, which in this case is "apple".</div>
    </div>
  </v-app>
</div>

Finally here is a screenshot of the elusive input in dev tools:

Answer 1

Something pretty much liked Sudam Dissanayake said.

PD: I modified your snippet... Just run it

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      product: {},
      products: [{title: 'apple', upc: '123'}, {title: 'Another fruit', upc: '456'}],
    }
  },
  created() {
    this.product = this.products[0];
  },
})

.app-container {
  display: flex;
}

.message {
  width: 200px;
}

.v-select__selections > input {
  display: none !important;
}

.v-select__selection {
  min-width: fit-content !important;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app id="inspire">
     <div class="app-container">
      <div>
      <v-select
        hide-details
        dense
        attach
        outlined
        return-object
        v-model="product"
        :items="products"
        item-text="title"
      ></v-select>
      </div>
      <div class="message">Why is there a sibling <code>input</code> element next to the element that contains <code>apple</code> that takes up a bunch of space? I only want the dropdown as wide as the longest text in the dropdown, which in this case is "apple".</div>
    </div>
  </v-app>
</div>

Answer 2

What you can do is first hide the input.

.v-select__selections input {
   display: none;
}

After doing that, add the following code to change the text wrap and change the fix width of selection area.

.v-select__selection {
  width: auto;
}

.v-select__selection--comma {
  overflow: visible;
  text-overflow: unset;
  white-space: unset;
}