Skip to content

Fix Horizontal Scrollbars not updating when content overflows#8160

Merged
rtivital merged 2 commits intomantinedev:masterfrom
lgrones:master
Aug 16, 2025
Merged

Fix Horizontal Scrollbars not updating when content overflows#8160
rtivital merged 2 commits intomantinedev:masterfrom
lgrones:master

Conversation

@lgrones
Copy link
Copy Markdown
Contributor

@lgrones lgrones commented Aug 9, 2025

Fixes #8075

The problem is that display: block by default lets its content overflow vertically, but only grows to 100% horizontally. This could be fixed in two ways

  1. Make the content have display: inline-block
  2. Make the content have a fixed width

I fixed the issue by giving the content container of ScrollArea.Autosize width: min-content. I think that's the least intrusive way of handling this issue that hopefully doesn't break anything else. This way the container resizes whenever the content changes its width.

I deliberately only applied the fix to ScrollArea.Autosize as applying it to ScrollArea messes up other components like MultiSelect.

If anyone has a better solution to this problem feel free to let me know. I kinda worry that applying these styles messes up other components relying on ScrollArea.Autosize down the line.

@rtivital rtivital merged commit f30edff into mantinedev:master Aug 16, 2025
1 check passed
@rtivital
Copy link
Copy Markdown
Member

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ScrollArea doesn't update its horizontal scrollbar when children are resized

2 participants