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
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