ScrollArea with Resizable.Pane

[julien-blanchon]

Describe the bug

Look like it's not possible to have both a ScrollArea and a Resizable Pane together.

I've tried

<ScrollArea orientation="vertical">
	<Resizable.Pane
		defaultSize={60}
		maxSize={80}
		minSize={50}
		style="overflow-y: scroll;"
		id="left-tab"
		class="relative mx-auto mt-6 w-full overflow-y-scroll p-2 md:p-8 lg:mt-0 lg:h-full lg:w-3/5"
	>
		<RightPanel />
	</Resizable.Pane>
</ScrollArea>

And

<Resizable.Pane
	<ScrollArea orientation="vertical">
			defaultSize={60}
			maxSize={80}
			minSize={50}
			style="overflow-y: scroll;"
			id="left-tab"
			class="relative mx-auto mt-6 w-full overflow-y-scroll p-2 md:p-8 lg:mt-0 lg:h-full lg:w-3/5"
		>
			<RightPanel />
	</ScrollArea>
</Resizable.Pane>

Reproduction

<Resizable.Pane

defaultSize={60}
maxSize={80}
minSize={50}
style="overflow-y: scroll;"
id="left-tab"
class="relative mx-auto mt-6 w-full overflow-y-scroll p-2 md:p-8 lg:mt-0 lg:h-full lg:w-3/5"
>


</Resizable.Pane>

Logs

No response

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1 Pro
    Memory: 42.39 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 4.0.1 - ~/.volta/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.4.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.15 - /opt/homebrew/bin/bun
    Watchman: 2024.06.10.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 125.1.66.118
    Chrome: 126.0.6478.114
    Safari: 17.0
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.17 
    bits-ui: ^0.21.10 => 0.21.10 
    cmdk-sv: ^0.0.17 => 0.0.17 
    formsnap: ^1.0.1 => 1.0.1 
    lucide-svelte: ^0.396.0 => 0.396.0 
    mode-watcher: ^0.3.1 => 0.3.1 
    svelte: ^4.2.7 => 4.2.18 
    svelte-sonner: ^0.3.24 => 0.3.24 
    sveltekit-superforms: ^2.15.1 => 2.15.1 
    vaul-svelte: ^0.3.1 => 0.3.1

Severity

annoyance

[benediktms]

I'm encountering the same issue

EDIT: I was able to fix this by setting the height/max-height in the wrapped component. @julien-blanchon in your case it would be e.g. <RightPanel class="max-h-[80vh]" />. This will kind of work, but it will probably not be very responsive, but at least it works.