Fix select options positioning; closes #184

src/components/select/select.scss

@@ -1,6 +1,7 @@
 @import 'component';
 @import 'form-control-label';
 @import 'form-control-help-text';
+@import 'mixins/hide-scrollbar';
 
 :host {
   display: block;
@@ -43,3 +44,27 @@
 .select:not(.select--empty) .select__input::part(clear-button) {
   visibility: visible;
 }
+
+// For multiselect, ensure tags don't wrap and can be scrolled when the control's width is smaller than its contents. We
+// also need to make sure the clear button and the chevron icon always show.
+.select--multiple {
+  .select__input::part(input) {
+    flex: 1 1 0;
+  }
+
+  .select__input::part(prefix) {
+    @include hide-scrollbar;
+    flex-shrink: 1;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  .select__input::part(clear-button),
+  .select__input::part(suffix) {
+    padding-left: var(--sl-spacing-x-small);
+  }
+
+  &.select--has-tags .select__input::part(input) {
+    margin: 0;
+  }
+}

src/components/select/select.tsx

@@ -365,6 +365,7 @@ export class Select {
             'select--focused': this.hasFocus,
             'select--disabled': this.disabled,
             'select--multiple': this.multiple,
+            'select--has-tags': this.multiple && this.displayTags.length > 0,
             'select--small': this.size === 'small',
             'select--medium': this.size === 'medium',
             'select--large': this.size === 'large',