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

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

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

下面是.select2-container中没有高度属性的初始选择框高度– 默认.select2-selection – 多个 ，自动高度在这里完美运行。

.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; } 

更新了小提琴 ， 我希望它适合你，谢谢。

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