ScrollArea: child with flex display not taking 100% height

[Nikhil-Vats]

I am using ScrollArea element like this -

<ScrollArea  
  className="grow h-full"
  classNames={{
    root: "grow h-full",
    viewport: "flex",
  }}>
  <Accordion className="flex h-full grow>
     <child1>
     <child2>
     <child3 className="grow"> // I want this accordion item (textarea) to take all empty space in the page so that there is no whitespace at end
     <child4>
  </Accordion>
</ScrollArea?  

Because the deepest element of ScrollArea component is a div with display: table, the flex is not growing to take up empty space. The only fix I could find was to add height: 100% to the deepest div with display: table but there is no selector/class for it, I tried it using devtools. Is there a way for a child of ScrollArea to grow to take all empty space on page without using a hack like adding height: 100% without a selector since I am using tailwind and not SCSS.

[rtivital]

Add a div element inside scroll area that will be a flex container

[Nikhil-Vats]

I have tried that but it is not working.

The image below shows that scrollarea has 100% height

I have a flex container inside scrollarea which doesn't take parent's height with flex-grow, 100% height and other properties.

[tombohub]

Tailwind added support for styling the children: https://tailwindcss.com/blog/tailwindcss-v3-4#style-children-with-the-variant

[Hikari-54]

I'm facing the same problem.
Solved it through SCSS.
Add this class to ScrollArea and div with display: table will take 100% of height.

.scrollAreaFix {
  height: 100%;

  > * {
    height: 100%;

    > * {
      height: 100%;
    }
  }
}

After you can hang space-between on the internal Flex.

Other methods have not solved the problem so far.

[HaTrang96]

It seems this method is a bit tricky, and unfortunately, it doesn’t work with Firefox

[msruan]

Did you resolve it? I needed to use just a div with overflow-auto instead scrollarea and it works.
Also in my case adding height: 100% on the scrollarea children not worked.