Scroll Area cannot scroll when provided with max-height and no height

[Ding-Fan]

https://www.radix-ui.com/docs/primitives/components/scroll-area

change the example in codesandbox

// from
const StyledScrollArea = styled(ScrollAreaPrimitive.Root, {
  width: 200,
  height: 225,

// to
const StyledScrollArea = styled(ScrollAreaPrimitive.Root, {
  width: 200,
  maxHeight: 225,

then it cannot scroll, neither the scroll bar show up

in my case I would like my StyledScrollArea only fix height and can scroll while the content in it meet maxHeight

[benoitgrelard]

Hey @Ding-Fan,

It doesn't seem to be an issue with the ScrollArea itself but rather a CSS one.
You can see here a barebones example not using the component but just some div and the same styles:

https://codesandbox.io/s/scrollarea-maxheight-barebones-xursg4?file=/src/App.js

You can see the same issue with native scroll. Basically the issue is that the viewport div with height: 100% within the maxHeight one expand further than it should.

You can resolve the issue using flexbox (see the commented properties to uncomment).

Hope this helps!

✌️