Controlling which VBox gets the scrollbar

Question

I have the following application and I am trying to put a scrollbar somewhere inside the TabNavigator, preferably on the innermost Vbox, but the scrollbar always ends up on the Panel. Is there some kind of property which controls this? I thought height=100% would have controlled it but it doesn't seem to work.

Sample is here. You can view source on it: VBox Sample

Here is the source anyway:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html">
    <mx:Panel width="400" height="400">
        <mx:TabNavigator width="100%" height="100%" creationPolicy="all">
            <mx:VBox label="Tab 1" width="100%" height="100%">
                <mx:ViewStack width="100%" height="100%">
                    <mx:VBox width="100%" height="100%">
                        <mx:Text width="100%" height="500" text="This box is taller than the Panel, but the scrollbar is on the window." />
                    </mx:VBox>
                </mx:ViewStack>
            </mx:VBox>
        </mx:TabNavigator>    
    </mx:Panel>
</mx:Application>

Answer 1

I've had this issue in the past, and the solution is a bit wonky, but hopefully this helps:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Panel width="400" height="400" verticalScrollPolicy="off">
        <mx:TabNavigator width="100%" height="100%">
            <mx:VBox id="container" label="Tab 1" width="100%" height="100%">
                 <mx:ViewStack width="100%" height="{container.height - 20}">
                    <mx:VBox width="100%" height="100%">
                        <mx:Text width="100%" height="500" text="This box is taller than the Panel, but the scrollbar is on the window." />
                    </mx:VBox>
                </mx:ViewStack>
            </mx:VBox>
        </mx:TabNavigator>    
    </mx:Panel>
</mx:Application>

Flex seems to calculate dynamic component dimensions properly about 98% of the time, but sometimes we need to "massage" the logic.

When you look at your layout hierarchy (as I've shown above), you just need to name the parent container (in this case Tab1) for the purposes of data binding, then use that container's height property for your sizing. (you also don't need to explicitly state verticalScrollPolicy="off" on the panel, but I use if for good measure :P)

Note that you may need to subtract a bit from the given height or your scrollbar will be below the component bounds ;)