[ScrollArea] display: table is altering width on a vertical scroll element

[GetPsyched]

Bug report

Reference:

primitives/packages/react/scroll-area/src/ScrollArea.tsx

Lines 176 to 185 in c31c972

	{/**
	* `display: table` ensures our content div will match the size of its children in both
	* horizontal and vertical axis so we can determine if scroll width/height changed and
	* recalculate thumb sizes. This doesn't account for children with *percentage*
	* widths that change. We'll wait to see what use-cases consumers come up with there
	* before trying to resolve it.
	*/}
	<div ref={context.onContentChange} style={{ minWidth: '100%', display: 'table' }}>
	{children}
	</div>

Current Behavior

Due to the display: table property, my list which is supposed to scroll vertically, is now being expanded horizontally as well since the text overflows, I've set the text to truncate based on the parent's width but because of this property my parent is expanding to fit the children.

Expected behavior

Respect the width if scroll is vertical and vice versa.

Suggested solution

Maybe another way to expand to full size which targets only one dimension?

Your environment

Software	Name(s)	Version
Radix Package(s)	react-scroll-area	1.0.5
React	n/a	18
Browser	Firefox	123.0
Assistive tech	n/a	n/a
Node	n/a	20.10.0
npm/yarn	npm	10.2.3
Operating System	NixOS	23.11

[resulyrt93]

Hey team, we also suffering with that problem. Is there any progress about it?

[benoitgrelard]

Duplicate of #926

[benoitgrelard]

Planning on addressing this soon.

[bertkdowns]

If anyone is still having this issue, one way you can force the width to be the same as a parent is adding manual styling to the div with display:table like so:

<ScrollArea className='h-full'>
    <style>
        {`
        [data-radix-scroll-area-viewport] div {
            display:block !important;
        }
        `}
    </style>
    {/*content goes here*/}
</ScrollArea>

[GetPsyched]

But I suppose this is fixed in #2945? I haven't tested it since I don't think this has made it into any release yet.

[bfourgeaud]

I updated to 1.1.0 but still display:table that messes everything up ...
Any udpades on when it will be merged into a new version ?

I added a *:!block selector to force the children to display correctly for now.

<ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit] *:!block">
    {children}
</ScrollAreaPrimitive.Viewport>

[Barresider]

I use a less invasive variant, where I overwrite the display property only for this element:

<ScrollAreaPrimitive.Viewport className=“size-full rounded-[inherit] [&>div]:!block”>
  {children}
</ScrollAreaPrimitive.Viewport>

[rvanbaalen]

Whats the status of this? Just ran into the same issue..

[lokendra-singh-rao]

Seems radix is busy