fix: 🐛 fill height of parent container scroll area #2865
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Ran into an issue, where the scroll area wouldn't take up the whole height of the parent container, only then did I notice there was an intermediate
div
being placed with display table. I get this is to match the height of the children, but this way I can't fill the height of the parent.Here is an example where I need this:
In case the ScrollArea ViewPort does not overflow, I want a button to be at the bottom of the page, but in case the viewport gets bigger (scrolling gets enabled) I want the button to stay at the bottom of this child.
Before:
ScrollArea Content inherits the size from its children, so the button gets appended immediately after the cards (this would be the expected behaviour if we would've needed scrolling)
After:
ScrollArea Content fills the whole page's height and thus the button can be at the very bottom of the page.
Note
I've tried around with lots of other css styles but ultimately only this ended up working, if anyone has other suggestions, feel free :)