I've got the following Flex application markup:

<app:MyApplicationClass
    xmlns:app="*"
     width="100%"
    height="100%"
    layout="vertical"
    horizontalScrollPolicy="off"
    verticalScrollPolicy="off">
    <mx:VBox id="idPageContainer" width="100%" height="100%" verticalGap="0"
        horizontalScrollPolicy="off" verticalScrollPolicy="off">
        <mx:HBox id="idTopContainer" width="100%" height="28" horizontalGap="2">
            (top menu stuff goes here)
        </mx:HBox>
        <mx:HBox id="idBottomContainer" width="100%" height="100%" verticalScrollPolicy="off" clipContent="false">
            (page stuff goes here)
        </mx:HBox>
    </mx:VBox>
</app:MyApplicationClass> 

When I run it, it displays top panel with a fixed height, and a bottom panel with variable height. I expect the bottom panel's height to contain the remaining height, but it somehow overflows off-page.

The only way I found to fix this height issue (so far) is to programmatically set the height to be fixed instead of variable:

    <mx:HBox id="idBottomContainer" width="100%" height="700" verticalScrollPolicy="off" clipContent="false">
        (page stuff goes here)
    </mx:HBox> 

And code-behind:

package {
    import mx.containers.HBox;
    import mx.core.Application;
    import mx.events.ResizeEvent; 

    // (...) 
    public class MyApplicationClass extends Application {
        public var idBottomContainer:HBox;
        // (...) 

        private function ON_CreationComplete (event:FlexEvent) : void {
            // (...) 
            addEventListener(ResizeEvent.RESIZE, ON_Resize);
        } 

        private function ON_Resize (event:Event) : void {
            idBottomContainer.height = this.height - idTopContainer.height;
        }
    }
} 

But this solution is too "dirty" and I'm looking for a more elegant way. Does anyone know an alternative?