Skip to content

Conversation

lgrones
Copy link
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
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