'sl-select multiple' shrinks and doesn't show full options

[gengns]

'sl-select multiple' shrinks and doesn't show full options

[gengns]

@claviska but both sl-select and sl-select multiple should behave the same inside the flex container and they are not.

[claviska]

The control is designed so the listbox is the same width as the "text field" that displays the selection. In most cases, this is desirable. In your case, the control is so small you can't even see the label.

If you really want controls that small, you can change the size of the listbox with CSS. However, users will still have trouble viewing the selected items. 🤷🏻‍♂️

sl-select::part(listbox) {
  min-width: min-content; 
  white-space: nowrap;
}

Result:

[gengns]

Dear @claviska, thank you so much for your answer, but I'm not changing any size in any sl-select. Select 1 and Select 2 are the default examples from the Shoelace documentation.

<div style="display: flex">
  <sl-select label="Select 1" multiple clearable>
    <sl-option value="option-1">Option 1</sl-option>
    <sl-option value="option-2">Option 2</sl-option>
  </sl-select>

  <sl-select label="Select 2" clearable>
    <sl-option value="option-1">Option 1</sl-option>
    <sl-option value="option-2">Option 2</sl-option>
  </sl-select>
</div>

If you remove the value from the sl-select with the multiple attribute, it doesn't work as expected. We cannot see options : (

<sl-select label="Select 1" multiple clearable>

If you remove the value from the sl-select without the multiple attribute, it works as expected.

<sl-select label="Select 2" clearable>

Example here.

Sorry If if I didn't explain myself well enough before, I don't know, maybe I'm missing something.

Thank you so much for your time.

[claviska]

The display: flex container is causing the sizing issue. If you need it as a flex child, either set an explicit width or an appropriate flex.

https://jsfiddle.net/oL2u581q/

[gengns]

But why it's needed extra CSS or change component just for sl-select with the multiple attribute. Is that behavior made on propose for something? I'm using FF and Chromium based browsers.

With normal sl-select you don't need to change / add anything, it simple works.
https://jsfiddle.net/fuk3p9nv/1/

[claviska]

Because you’re overriding the default display (and thus size) by putting it into a flex container.