ScrollArea doesn't work in a dynamic height container

[eakl]

What package has an issue

@mantine/core

Describe the bug

ScrollArea doesn't work in a flex container when the parent is flexGrow: 1 or height: 100%

In which browser did the problem occur

Chrome

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/eloquent-margulis-d7pv7?file=/src/Content.tsx

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

No response

[rtivital]

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

[eakl]

Why the wrapper div needs to be removed? on nested container, I can't make it work locally?

[rtivital]

I don't know, this is just how ScrollArea works

I can't make it work locally

It should not be different from the example that I've provided in sandbox. We have the same logic in Navabar.Section component and Select/MultiSelect dropdowns, it works fine.

[rtivital]

If you have any other questions, feel free to ask them here or on Discord

[BoreasHe]

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.

[cole-themeta]

I can't get ScrollArea to work inside of a Tabs.Tab and nothing here helped me :/

[rtivital]

Tabs.Tab is not different from any other content, ScrollArea works fine – https://codesandbox.io/s/inspiring-gauss-7nphy3?file=/src/App.tsx

[cole-themeta]

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

[cole-themeta]

@rtivital Any ideas on this ^?

[rtivital]

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.

[cole-themeta]

@rtivital I've been working with a variety of different components over the last two weeks and everything else has worked without issue.

The ONLY problematic component I've used in ScrollArea. I absolutely no matter what I do CANNOT get it to work with dynamic height content despite the working example above. Wrapping it in a flex container and setting flex: 1 on the ScrollArea within does nothing (see codesandbox below).

And I just ran into another issue where it doesn't let you scroll if you set maxHeight instead of height which makes no sense to me. In this case, it just simply doesn't allow for scrolling at all.

See updated code sandbox for examples:
https://codesandbox.io/s/zealous-poitras-xftoqn?file=/src/App.tsx

The issue isn't just with Tabs.Tab or anything else specific, it's with ScrollArea itself, it simply doesn't seem to work in most cases.

[rtivital]

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

[cole-themeta]

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!

[cole-themeta]

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

[sarbull]

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!

.your-wrapper {
  div[role="tabpanel"] {
    height: calc(100% - 40px);
    padding-top:0px;
  }
}

[paulchan14]

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.

[paulchan14]

This question on Stack Overflow yielded a solution that helped me. Checkout the JS Fiddle Example here.

To solve my problem, I removed <ScrollArea /> and used a <Box /> with the following styles (as informed by the JS Fiddle example):

overflow-y: auto;
height: auto;
max-height: 400px;

Now I can scroll that middle container with the header above and footer below staying in place.

[rtivital]

@paulgpeterson We provide ScrollArea.Autosize component that does the same thing – https://mantine.dev/core/scroll-area/#scrollareaautosize

[kevinbeal]

Max Height works fine when you wrap the ScrollArea in a div like <div style={{maxHeight:400,display:"flex"}}><ScrollArea /></div>

[DesertStrom16]

@paulgpeterson We provide ScrollArea.Autosize component that does the same thing – https://mantine.dev/core/scroll-area/#scrollareaautosize

Is Autosize supposed to be implemented separately from ScrollArea? I.e. <SrollArea><AutoSize><content> or is it one or the other?

Nowhere in the documentation does it state this.

[rtivital]

There is a usage example in documentation

[wanghq-23]

How can I use AutoSize in Prism? I want to make the prism width grow when the parent is flexGrow: 1 or height: 100%. View width work well but i can't use view width in react-markdown componet render.Is there any way to solve this problem. Thanks!

[asyncink]

For anyone who is curious how to achieve ScrollArea.Autosize behavior bot for width:

<ScrollArea
  w="min-content"
  maw="100%">
  ...
</ScrollArea>

P.S. Thanks to Mantine team for adding ScrollArea.Autosize in response for this issue!