Why does svelte-select not understand that it needs to truncate itself based on parent width?

[frederikhors]

I would like to understand how to make svelte-select to "auto-regulate" it's width based on parent width.

Example: https://svelte.dev/repl/e69f84a4208a4a5887e2f56e8c16bb89?version=3.58.0

When I reduce the REPL window width do you see the horizontal scrollbar at the bottom?

I would like svelte-select auto understand it needs to use the ellipsis / truncate behavior, like this:

I can fix it by using on the parent the code:

<div class="col-span-1 overflow-x-hidden">
  <CustomSelect />
</div>

but I need something inside the CustomSelect.svelte component and not in the parent one. This because the CustomSelect is used a lot and in a lot of places.

Any idea?

[rob-balfre]

It works fine without tailwind I think?

[frederikhors]

Nope, tailwind is just what I'm using, you can try it even without Tailwind. The issue is the ellipsis is not present if the parent width is smaller.

[rob-balfre]

See here: https://svelte.dev/repl/a343790c42254d698c885aecc0e90925?version=3.58.0

Otherwise show me what you mean in your own simple REPL.

[frederikhors]

Ok, I reduced the example in REPL removing Tailwind and what is not needed.

Plus the gif:

Do you see now what I mean?

[rob-balfre]

Nothing to do with svelte-select, just CSS... https://svelte.dev/repl/2e34e9b2088d4a7e8b51e4f07058e062?version=3.58.0