Unintuitive 'display:xyz' behaviour in scroll-area component

[DaniS0312]

Describe the bug

The problem I faced was being unable to truncate text based on the scrollarea component's parent width constraint. Below is a video example, and minimal code to reproduce.

Upon some debugging I found that the source of the issue is that the ScrollAreaPrimitive.Content element is manually styled with display:table (and min-width: 100%). This breaks the flex/w-full chain I was using to constrain width.

Upon changing the content element (tagged with 'data-melt-scroll-area-content') to display:flex, I get the desired effect.

When I try to overwrite this in the component:

It gets overwritten by those manual styles:

1. Is the display:table necessary? From first glance it doesn't seem to be needed.
2. If not, how would I proceed to overwrite these default styles?

P.S. I've had trouble with the obfuscated bits-ui (and even lower-level melt-ui) parts a few times now, maybe I am thinking about it wrong. If I look at the docs for the melt-ui scroll-area here here I can't see those styles being applied either. Could you maybe elaborate on when I would need to reach into melt-ui components? From my perspective your shadcn port is already pretty damn robust.

P.P.S Big congratulations on the work you've put out for the Svelte ecosystem.

Reproduction

The top is using normal 'overflow-auto' container, the bottom is using the scroll-area component.

flex_w-full.mp4

<script>
    import ScrollArea from "$lib/components/ui/scroll-area/scroll-area.svelte";
</script>

<div class="flex h-full w-full flex-col items-center justify-center gap-5">
    <!-- 1. using simple overflow container -->
    <div class="h-64 w-64 overflow-auto">
        {#each new Array(20) ?? [] as _}
            <div class="flex w-full flex-row bg-red-100">
                <div class="flex w-12 bg-orange-300">
                    <span class="truncate">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
                </div>
                <div class="flex min-w-0 grow bg-green-300">
                    <span class="truncate">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facere unde quisquam illum ipsa dolor modi est
                        itaque temporibus ea. Maiores fugit facilis quo consectetur vitae est vel laborum praesentium.
                    </span>
                </div>
                <div class="flex min-w-0 text-nowrap bg-purple-300">
                    <span class="truncate">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
                </div>
            </div>
        {/each}
    </div>

    <!-- 2. Using Scroll area -->
    <ScrollArea class="h-64 w-64">
        {#each new Array(20) ?? [] as _}
            <div class="flex w-full flex-row bg-red-100">
                <div class="flex w-12 bg-orange-300">
                    <span class="truncate">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
                </div>
                <div class="flex min-w-0 grow bg-green-300">
                    <span class="truncate">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facere unde quisquam illum ipsa dolor modi est
                        itaque temporibus ea. Maiores fugit facilis quo consectetur vitae est vel laborum praesentium.
                    </span>
                </div>
                <div class="flex min-w-0 text-nowrap bg-purple-300">
                    <span class="truncate">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
                </div>
            </div>
        {/each}
    </ScrollArea>
</div>

Logs

No response

System Info

System:
    OS: macOS 14.4.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 3.21 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 7.21.0 - /usr/local/bin/pnpm
  Browsers:
    Brave Browser: 122.1.63.165
    Chrome: 124.0.6367.79
    Safari: 17.4.1
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.5 
    bits-ui: ^0.21.4 => 0.21.4 
    lucide-svelte: ^0.367.0 => 0.367.0 
    svelte: ^4.2.7 => 4.2.12

Severity

annoyance

[xpengy]

i had this issue too.

what i did was go into scroll-area.svelte and added this style, and it seems to work now by overriding the display: table.

<ScrollAreaPrimitive.Content style="min-width: 100%; display: flex;">