How to automatically increase the height of select2 input box (multiple)
<p>I have a select2 input box for multiselet option in which, user can select as many options as he wants, if the selected options are occupying more space than available width then I wanted to increase the height of the select box automatically (don't want scroll option, all options should be in viewable space) and get the remaining options in next line. Currently options are coming in the next line but the height of the select box is not increased.</p>

<p><a href="https://i.stack.imgur.com/NW21K.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NW21K.png" alt="enter image description here"></a></p>

<p>If I remove the height property in the <strong>.select2-container--default .select2-selection--multiple</strong> class, it is working. But I want this height property to control the initial height of the select box.</p>

<p>Below is the initial select box height without heigh property in the <strong>.select2-container--default .select2-selection--multiple</strong> and the auto height works perfectly here.
<a href="https://i.stack.imgur.com/KDbqC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KDbqC.png" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/FZBlo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FZBlo.png" alt="enter image description here"></a></p>

<pre><code>.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;
}
</code></pre>

<p>JSFiddle: <a href="https://jsfiddle.net/rd62bhbm/" rel="noreferrer">https://jsfiddle.net/rd62bhbm/</a></p>