Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ScrollArea doesn't work in a dynamic height container

See original GitHub issue

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

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

No response

Possible fix

No response

Issue Analytics

State:
Created 2 years ago
Comments:19 (7 by maintainers)

Top GitHub Comments

6reactions

rtivitalcommented, Apr 12, 2022

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

2reactions

rtivitalcommented, Apr 4, 2022

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.

Top Results From Across the Web

Scrollbar without fixed height/Dynamic height with scrollbar

I think it's not the correct answer. It won't work without a fixed height for the body element. – Equanox. Feb 22, 2018...

QScrollArea content hidden if height is not provided #7248

When you don't specify a height on a QScrollArea but you do set a min-height, the content in the scrollarea is hidden somehow....

ScrollRect : how to dynamically increase the content size

For first practice, place the ScrollView object in the middle and set the anchors of Viewport to 0,1 so it takes the whole...

Element size and scrolling - The Modern JavaScript Tutorial

Setting scrollTop to 0 or a big value, such as 1e9 will make the element scroll to the very top/bottom respectively. Don't take...

ScrollView - React Native

Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container ......