Forcing a Flex VBox to scroll when necessary

The VBox Flex container allows you to stack objects vertically.  If your VBox can have an unknown number of children and your app is not a fixed height, a weird behavior can occur where the VBox height expands beyond the height of it’s parent.  This usually causes scroll-bars to appear in unexpected places and possibly messes up your application layout.  Fixing this can be a nightmare of chasing down parent containers and trying to control their clipping.

Fortunately there’s a simple solution . Just set  minHeight=”0″ and it will tell the component to not expand beyond the height of it’s Parent.  This works for any container with a vertical layout as well including Panels

There’s additionally an autoLayout property which can be set to false, however I can’t get consistent results with that.  It seems like there would be some more intuitive property name to control this behavior, but at least there is a solution.

5 Responses to “Forcing a Flex VBox to scroll when necessary”

  1. Georges Jentgen June 16, 2010 at 3:37 pm #

    Awesome! Thanks for sharing. Hope I remember it the next time I run into this situation :)

  2. Dany Dhondt January 30, 2011 at 1:34 am #

    A golden tip! Saves me hours of frustrated searching! thx

  3. Arda March 25, 2011 at 1:49 am #

    Most Valuable tip!
    I have been struggling with this for days.
    Thank you very much.

  4. Smita August 4, 2011 at 5:43 am #

    Thanks a lot…. i was searching for the solution for a log time… this helped me a lot and solved my problem

  5. Priyanka September 26, 2011 at 5:31 am #

    Hey… Thanks lot… It helped me….!!!!

Leave a Reply

Please leave these two fields as-is: