With flexbox align to parent, if the elements that are inside of the container do not have enough height (or width), they begin to ‘cover’ each other.
Is it possible to make it so that they don’t cover each other? Instead, if there’s not enough height I just want to vertically scroll within the container to be able to view the elements.
Example:
Current behaviour: Screen capture - be1c9aca509487fb8c78d9e31b0856fb - Gyazo
Desired behaviour: Screen capture - 50c083b668ac811b6fa8deb2d8832556 - Gyazo
Live demo: Bubble | No-code apps
Edit: Or perhaps there’s a way to achieve the same result without using the “align to parent” layout?
I achieved the desired outcome by setting a minimum height on the container, but I wonder if there’s another way because the min-height value will have to be updated in the future if more elements are added. Would be great if there was a simple solution that wouldn’t require any maintenance in the future.
The whole point of Align to parent is so things can cover each other…
You just want the Column layout if you want things to vertically stack.
Your main container should have Fit height to content checked, and your items inside can be either fixed height, or fit to content, etc. and the main container’s height will stretch to fit those.