In my project, I have implemented a select2 input box for multiple selections. The user can choose as many options as they want, but if the selected options take up more space than the available width, I need the select box to automatically increase in height to accommodate all selected options without using a scroll bar. Currently, when the options exceed the width, they appear on the next line but the height of the select box remains the same.
https://i.sstatic.net/NW21K.png
I noticed that removing the height property from the .select2-container--default .select2-selection--multiple class fixes the issue. However, I still want to use this height property to set the initial height of the select box.
Here is an example of the select box without the height property in the .select2-container--default .select2-selection--multiple class, where the auto height feature works perfectly. https://i.sstatic.net/KDbqC.png
https://i.sstatic.net/FZBlo.png
.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;
}
Here is the JSFiddle link for reference: https://jsfiddle.net/rd62bhbm/