How to automatically increase the height of select2 input box (multiple)

Question

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

Answer 1

Add this CSS to select2-selection--multiple class:

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

Updated Fiddle, I hope it works for you, Thanks.

Answer 2

Use min-height:22px instead of 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;
}