如何自动增加select2输入框的高度（多）

Question

我有一个 select2 多选选项输入框，用户可以 select 任意多的选项，如果 selected 选项占用更多 space 比可用宽度那么我想自动增加 select 框的高度（不需要滚动选项，所有选项都应该可见 space）并在下一行获取剩余选项.目前选项在下一行，但 select 框的高度没有增加。

如果我删除 中的高度 属性。select2-container--default .select2-selection-- multiple class，它正在工作。但是我想要这个高度属性来控制select框的初始高度。

下面是 .select2-container--default .select2- 中没有 heigh 属性 的初始 select 盒子高度selection--multiple 和自动高度在这里工作得很好。

.select2-container--default .select2-selection--multiple {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 2px;
  border-radius: 2px;
  cursor: text;
  height: 22px;
}

JSFiddle：https://jsfiddle.net/rd62bhbm/

Answer 1

使用min-height:22px代替height:22px

select2-container--default .select2-selection--multiple {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 2px;
  border-radius: 2px;
  cursor: text;
  min-height: 22px;
}

Answer 2

将此 CSS 添加到 select2-selection--multiple class:

.select2-selection--multiple{
    overflow: hidden !important;
    height: auto !important;
}

Updated Fiddle，希望对你有用，谢谢。