mantine: ScrollArea doesn't work in a dynamic height container

Scrollarea works fine, you just did not put it in flex container. https://codesandbox.io/s/interesting-curran-vn9ms3?file=/src/App.tsx

I’ve provided all examples I had, the general approach is to wrap ScrollArea in flex container and setting flex: 1 on it. You can find examples in previous sandboxes and Navbar.Section component source code as an example.

Hi, sorry for digging into the closed issue. I found a trick to “solve” this weird issue:

<Card>
  <Card.Section>
  // ...
  </Card.Section>

  // Relative wrapper
  <div style={{ position: "relative", height: "100%" }}>
    // Absolute scrollarea div, adjust the 0s if needed
    <ScrollArea style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}>
      {
        // mapping func
      }
    </ScrollArea>
  </div>
</Card>

It may not be an elegant solution, but hope it helps someone who encountered this problem.

I can’t get ScrollArea to work inside of a Tabs.Tab and nothing here helped me 😕

Here’s another piece for you. It looks like the above problems were solved by adding height: "calc(100vh - 40px)", but this is still using a fixed height. Looking through the Navbar.Section example as well, the <Navbar /> itself has a fixed height of 600.

My problem is that I want to have a ScrollArea within a dropdown that contains both a header (search bar, etc) and a footer (control / submit buttons), but I don’t want to set a fixed height because the content in <ScrollArea> may not have enough items to fill said fixed height. It is looking like there is no way to use this component with containers, flex or otherwise, with truly dynamic height as opposed to fixed or calculated values.

Side note: I think the docs should be updated with an example like this

The secret ingredient is setting the calulated height of the above flex container which is an extremely important missed detail!

height: "calc(100vh - 40px)"

But it works! So all is good even if it took a good week to get there!

Okay, let me clarify. I can get it to work with a set height, but I want it to take up 100% of it’s parent and scroll in that. Setting height to 100% or not setting it scrolls the entire page which is the issue I’m having here.

Tab 1 has a 400px height and scrolls the parent, Tab 2 has a 100% height and scrolls the entire page: https://codesandbox.io/s/awesome-mopsa-2jnxhs?file=/src/App.tsx

It works fine, you just need to remove a wrapper div – https://codesandbox.io/s/vigilant-roentgen-j4f9y?file=/src/Content.tsx