[ScrollArea] Content with ellipsis CSS bursts out of container.

[jjenzz]

Issue: https://codesandbox.io/s/frosty-cerf-poy3y?file=/src/styles.css
Example of native scrollable without this issue: https://codepen.io/jjenzz/pen/jOLMjvJ

I'm wondering if we still need the display: table stuff now so will investigate getting rid of that as a potential solution at some stage.

[MaxMusing]

This is blocking us from adopting Scroll Area in the one component we really want it.

[funwithtriangles]

Any updates on this? Also experiencing issues here

[jjenzz]

@funwithtriangles We haven't had time to look into any of this yet I'm afraid so no updates.

[funwithtriangles]

@jjenzz no worries. For anyone who's also having problems, I'm just overriding the inline styles for now to get rid of display: table:

const StyledViewport = styled(ScrollAreaPrimitive.Viewport, {
  ...

  "> div[style]": {
    display: "block !important",
  },
})

[flex-soyoung]

I hope this issue is resolved quickly. 🙏 ScrollArea is a really nice component, but this issues make it difficult to use. (I wonder if there is any reason to keep display: table.)

[benoitgrelard]

@jjenzz do you remember what the reason why for display: table originally?

[jjenzz]

it was something to do with making that div the same width of the content for overflow-x calculations i believe.

if you remove it and test that things overflow the horizontal axis in a way that matches native scroll behaviour then should be good.

[JohnHershberg]

I have a similar problem and ended up overriding the table to flex instead. In my case I need to stack 2 items per row and I can't see how to achieve that with table. With flex I can set it to flex-wrap, and set each item to be 50% of the width so only 2 items fit before wrapping.

[syedmahmad]

I have a similar problem and I ended up overriding the table to block as follows:

// the viewport area of the scroll area
const ScrollAreaViewport = styled(ScrollAreaPrimitive.Viewport)({
  // all these settings pulled from radix example
  width: '100%',
  height: '100%',
  borderRadius: 'inherit',
  '&[data-radix-scroll-area-viewport]': {
    '& > :first-of-type': {
      display: 'block !important'
    }
  }
});

[ryantbrown]

With Tailwind, adding [&>div]:!block as a class to RadixScrollArea.Viewport fixes the issue.

For example:

<RadixScrollArea.Root className="overflow-hidden">
    <RadixScrollArea.Viewport className="w-full h-full [&>div]:!block">
        {children}
    </RadixScrollArea.Viewport>
</RadixScrollArea.Root>

[istarkov]

The other workaround is to place div with display:grid as a child of the Viewport, allows to not override viewport style

[rijk]

@jjenzz do you remember what the reason why for display: table originally?

When I changed the display from display: table to display: block, I noticed that the bottom padding of the child div was collapsed:

display: block:

[flex-sangho-moon]

Any updates?

[oyal]

It's been over two years, have there been any updates?

[DasOhmoff]

I also have this very same issue. It messes up the layout of the children especially when flexbox is used there. Would be great to fix it :)

[gabrieldesousah]

This is probably the more inconvenient problem in scrollarea =/
Use <RadixScrollArea.Viewport className="w-full h-full [&>div]:!block"> helps a lot.
There some reason to still remain display: table?

[jjenzz]

it might be possible to remove display: table and instead use height: min-content; width: min-content instead now: https://caniuse.com/?search=min-content

edit: ah, i just saw there is a PR with an alternate approach already 🙈 ignore!