javascript - Keeping select2 element a fixed size with scrolling? -

here fiddle example.

what example shows normal multiple-select select2 element user selects items list expand down , cause parent container expand down. can't have parent grow larger set due mobile , layout concerns.

how 1 set option disable expansion of element or @ least set css keep size of element , allow user scroll?

code below prevent linkrot.

html:

<form>     <select class="select-select2" multiple="multiple" data-placeholder="please choose 1 or more" data-allow-clear="true" data-close-on-select="false"> <option>lorem</option> <option>ipsum</option> <option>dolor</option> <option>sit amet</option> <option>consectetur</option> <option>adipisicing</option> <option>elit sed</option> <option>do eiusmod</option> <option>tempor</option> <option>incididunt</option> <option>ut labore</option> <option>et dolore</option> <option>magna aliqua</option> <option>ut enim ad</option> </select>     <button type="submit">submit</button> </form> 

js:

$(".select-select2").select2(); 

http://jsfiddle.net/8svf11yh/1/

.select2-container .select2-selection {     height: 60px;     overflow: scroll; }  

or overflow:auto; may better choice