通过滚动将select2元素保持为固定大小？

Question

这是一个例子.

此示例显示的是使用普通的多选select2元素,因为用户从列表中选择项目,它将向下扩展并导致父容器向下扩展.由于移动和布局问题,我不能让父母成长比设置的大.

如何设置禁用元素扩展的选项,或者至少设置CSS以保持元素的大小并允许用户滚动？

代码如下,以防止linkrot.

HTML:

<form>
  <select class="select-select2" multiple="multiple" data-placeholder="Please choose one 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();

Answer 1

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

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

或者溢出:auto; 可能是一个更好的选择

Answer 2

@ smcd版本的一些改进:

.select2-selection--multiple { max-height: 10rem; overflow: auto }

我正在使用max-height它,如果只选择几个选项它可以更小.只有达到那个高度,它才会变得更大.如所建议overflow: auto的那样很棒,因为它只在需要时才使用滚动条.最后,我定位--multiple选择器的变体,因此只有具有多个选项的选择才能获得此样式.