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

Question

我有一个用于multiselet选项的select2输入框，用户可以根据需要选择多个选项，如果所选选项占用的空间比可用宽度多，那么我想自动增加选择框的高度（don＆ ＃39; t想要滚动选项，所有选项都应该在可见空间中）并在下一行中获取剩余的选项。目前，选项将在下一行中出现，但选择框的高度不会增加。

如果我删除 .select2-container - default .select2-selection - multiple 类中的height属性，它就可以了。但是我想要这个height属性来控制选择框的初始高度。

下面是 .select2-container中默认高度属性的初始选择框高度 - 默认.select2-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

将此CSS添加到select2-selection--multiple类：

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

Updated Fiddle，我希望它适合你，谢谢。

Answer 2

使用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;
}