min-height 100% for scroll area

[BrianHung]

Wondering why for the ScrollArea component, min-height isn't also set to 100% like min-width is.

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

Line 183 in a53790e

<div ref={context.onContentChange} style={{ minWidth: '100%', display: 'table' }}>

Running into an issue where I can't stylize that wrapper div so that'll be same size as its parent.

[andy-hook]

@BrianHung This is possible for me by specifying height:

https://codesandbox.io/s/scroll-area-fill-parent-5kubxo?file=/App.js

Does that work for your case? I might be misunderstanding.

[BrianHung]

In the example, when I set length: 1 such that the child's height is less than parent's height, it doesn't fill up the space.

My use case is with a contenteditable that should grow to fit the height of the parent (even with no content), and scroll when its height from its content exceeds its parent.

[jamesarosen]

I have a solution. Make the ScrollAreaViewport a CSS Container (using container-type: size or container-type: scroll-state size), then set the height of the child to 100cqh.

Basing on the Scroll Area demo from the Radix docs:

.ScrollAreaViewport {
  container-name: scroll-viewport;
  container-type: scroll-state size;
}

.h-100cqh {
  height: 100cqh;
}

<ScrollArea.Root className="ScrollAreaRoot">
  <ScrollArea.Viewport className="ScrollAreaViewport">
    <div class="h-100cqh">
      This content will take up 100% of the scroll-area viewport height.
    </div>
  </ScrollArea.Viewport>
</ScrollArea.Root>

Note: Tailwind's @container class applies container-type: inline-size, which is great for responsive layouts, but won't set a queryable height that you can use for this case. If you happen to be using Tailwind, you'll need to define a custom utility to set container-type: size or container-type: scroll-state size.