Skip to content

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

Closed
Closed
[ScrollArea] display: table is altering width on a vertical scroll element#2722
Labels
Package: react/scroll-areaResolution: DuplicateThis issue is a duplicate
@GetPsyched

Description

@GetPsyched
GetPsyched
opened on Feb 24, 2024

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.

image

Expected behavior

Respect the width if scroll is vertical and vice versa.

image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Package: react/scroll-areaResolution: DuplicateThis issue is a duplicate

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions