Wie automatisch die Höhe von select2 Eingabefeld (mehrere)

Question

Ich habe ein select2 Eingabefeld für Multiselect-Option, in dem Benutzer so viele Optionen wie er will, wenn die ausgewählten Optionen mehr Platz als die verfügbare Breite belegen dann haben Ich wollte die Höhe der Auswahlbox automatisch erhöhen (Scroll-Option nicht, alle Optionen sollten im sichtbaren Bereich sein) und die restlichen Optionen in der nächsten Zeile abrufen. Derzeit kommen Optionen in der nächsten Zeile, aber die Höhe des Auswahlfelds wird nicht erhöht.

Wenn ich die Höhe Eigenschaft in den .select2-Behälter entfernen - Standard .select2-Auswahl - mehrere Klasse, es funktioniert. Aber ich möchte, dass diese Eigenschaft height die Anfangshöhe der Auswahlbox steuert.

Unten ist die erste Auswahl Box Höhe ohne Höhe Eigenschaft in der .select2-Container - Standard .select2-Auswahl - mehrere und die automatische Höhe funktioniert hier perfekt.

.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; 
} 

JSFiddle: https://jsfiddle.net/rd62bhbm/

Answer 1

diese CSS select2-selection--multiple Klasse hinzufügen:

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

Updated Fiddle, Ich hoffe, es funktioniert für Sie, Danke.

Answer 2

Verwenden min-height:22px statt 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; 
}