没有水平滚动条的 vue-multiselect 下拉列表答案

【问题标题】：vue-multiselect dropdown list without horizontal scrollbar没有水平滚动条的 vue-multiselect 下拉列表
【发布时间】：2018-03-26 20:14:49
【问题描述】：

我在单选模式下使用 vue-multiselect 并尝试应用样式以使选项下拉列表与最宽选项的宽度相同。我实现了这一点，但无法让 .multiselect__option 与父级 .multiselect__element 宽度相同：

https://jsfiddle.net/xo9f7jby/30/

.multiselect {
    width: fit-content
}

.multiselect__content-wrapper, .multiselect__element {
    width: fit-content; 
}

.multiselect__option {
    width: 100%;
}

【问题讨论】：

标签： css vue.js vuejs2 multi-select

【解决方案1】：

一个简单的解决方案是从.multiselect__element 中删除fit-content：

.multiselect__content-wrapper /*, .multiselect__element */ {
  width: fit-content; 
}

更新小提琴：https://jsfiddle.net/xo9f7jby/33/

【讨论】：

【解决方案2】：

我只是在课堂上评论你看到的位置

.multiselect__content-wrapper {
  /*position:absolute;*/
  display: block;
  background: #fff;
  width: 100%;
  max-height: 240px;
  overflow: auto;
  border: 1px solid #e8e8e8;
  border-top: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 50;
  -webkit-overflow-scrolling: touch
}

【讨论】：