I have a view (page) with root (direction set to column). In this root I am adding a bunch of flex containers (each of them are row direction). As I add more flex containers to the root I see the designer compresses each of the flex container to fit on the screen. I see the same effect on the browser as well. I want my view to grow vertically so user can scroll to content vertically. I tried various options like - style (overflow), position(grow), hard coding heights on the individual flex containers with no success except hard coding a very high style.height (like 2000px) on the root. But I don't want to hard code the height. Any suggestions?
- Shift-select all the flex containers in the Project Browser.
- In Property Editor set
POSITION
grow : 0
shrink : 0 <--- the important one!
basis : 300px <--- or whatever.
If you've messed up the root properties then try these:
PROPS
direction : column
wrap : nowrap
justify : flex-start
aligItems : stretch
style
overflow : auto
Play with position.basis
and see if you can set this to auto
so that it adopts the dimensions of the flex containers and that you're not setting parameters twice. You should probably then do the same with the flex containers, making sure that grow : 0
is set.
Thank you so much. This was very helpful and solved my problem