How do I choose which component gets scrollbars in nested flex containers?

Question

I have several nested VBoxes in flex, and I'm aiming for one of them to get scrollbars if the total content is larger than the window height.

However, when I grow the container, it doesn't get scrollbars at all (vertical scroll policy is AUTO), and the outer container stretches past the bottom of the screen, causing the entire app to get scrollbars.

So it looks something like this:

 ____________
|            |
| Container  |
|            |
|____________|
|            |
| Scrolling  |
| Container  |
|____________|
|            |
| Container  |
|____________|

How can I ensure only the inner (scrolling) container gets the scrollbars when the bottom container grows in size?

Thanks

Answer 1

In short - set minHeight property for your scrolling container to, say, 100:

<mx:VBox height="100%">
    <mx:Something/>

    <mx:VBox minHeight="100" height="100%">
        <!-- here will be scrollbars, if needed -->
        <mx:Something/>         
    </mx:VBox>

    <mx:Something/>
</mx:VBox>

By default, Boxes calculate their minimal size by the corresponding size of all their children. When outer container makes layout, it asks Box, what minimum size it can show and what actual size it is. So, unless changed manually, minimal size is equal to actual, and therefore parent container do stretches itself or do show scrollbars.