[ScrollArea] Consider dropping the inner div and the overflow style

[vladmoroz]

<ScrollArea.Viewport>
  {children}
</ScrollArea.Viewport>

currently renders:

<div style={{ overflow: 'scroll' }}>
  <div style={{ minWidth: 'fit-content' }}>
    {children}
  </div>
</div>

I've already run into slight hiccups with both when styling the components for the docs and had to use the render prop to remove the offending pieces. I think it's worth a thought to render a single div without any styles.

Overflow scroll:

• Assumes you want overflow on both axes
• Assumes you want overflow unconditionally (and not conditionally on/off like in the docs demo code block)

Extra div:

• Generally useful in most cases and/or not affecting the layout when it doesn't matter, but since scroll container styling can get gnarly and this inner div isn't accessible directly, I'd prefer to add this as a suggestion in the docs and as Base UI user have total control over my layout instead. As a really simplistic example, setting className="flex flex-col gap-2" on the viewport isn't going to add a gap between the items.

[atomiks]

So essentially the docs will just have the child div, or should this just be a new (semi-optional) part?:

<ScrollArea.Viewport>
  <div style={{ minWidth: 'fit-content' }}>
    your content
  </div>
</ScrollArea.Viewport>

And the overflow: scroll style is where the @layer idea you suggested in #1110 would come in handy.

---

Workarounds

At least both these have a workaround currently:

1. Get rid of the inner div using render:

<ScrollArea.Viewport
  render={(props) => <div {...props}>{props.children.props.children}</div>}
/>

2. Specify style with overflow: undefined:

<ScrollArea.Viewport style={{ overflow: undefined }} />