Flexbox容器内Vuetify v-select因空input拉伸变宽如何适配内容宽度？

问题根因 #

• Vuetify 2.x的v-select组件默认样式为width: 100%，默认会撑满父级容器的可用宽度
• 组件内部内置的原生可过滤input元素默认带有min-width: auto属性，在display: flex容器中，该属性会导致元素被自动拉伸撑满剩余空间，最终让整个下拉框宽度远超实际内容所需
• 你全局设置的input { height: 100% }也会改变内部input元素的盒模型计算逻辑，放大拉伸效果

修复方案 #

方案1：自适应内容宽度（推荐，适配动态选项场景） #

给包裹v-select的外层容器添加宽度自适应规则，同时重置内部input的最小宽度限制，代码修改如下：

1. CSS新增样式：

/* 自定义包裹容器类 */
.v-select-wrapper {
  width: fit-content;
}
/* 重置内部input的拉伸属性 */
.v-select-wrapper .v-input__control input {
  min-width: 0 !important;
  width: 0 !important;
}

2. HTML修改外层容器类：

<div class="v-select-wrapper">
  <v-select
    hide-details
    dense
    attach
    outlined
    return-object
    v-model="product"
    :items="products"
    item-text="title"
  ></v-select>
</div>

方案2：固定宽度适配（适合选项长度已知的场景） #

如果你的选项长度是固定的，也可以直接给v-select设置固定宽度或者最大宽度：

.v-select {
  max-width: 100px; /* 可根据最长选项文本调整数值 */
}

两种方案均可以实现下拉框宽度适配内部最长文本的效果，本示例中会自动适配"apple"文本的宽度。

内容的提问来源于stack exchange，提问作者maxshuty