Taming Scrollbars in complex layout in Flex

Question

Are there any general tips on managing scrollbars and maintaing a complex liquid layout in flex?

Here is the scenario:

The application container is full browser screen with a docked application bar at the top.

Inside the app is a general container called "appbox" which contains a viewstack of subcomponents. The subcomponents themselves are mostly tab navigators with more subcomponents nested within them. A common subcomponent type is the panel with a vertical layout

Here is the root level code:

<mx:Canvas width="95%" height="95%" id="appbox" styleName="appbox" disabledOverlayAlpha=".4" backgroundDisabledColor="#000000" disabledColor="#000000" verticalScrollPolicy="off" horizontalScrollPolicy="off">

     <!--The Application-->
      <mx:ViewStack id="appViewStack" width="100%" height="100%" styleName="paddingbox" resizeToContent="true" creationPolicy="all">
       <view:Authentication id="appAuthentication" />
       <view:MainContainer id="mainContainer" />
       <view:ReportContainer id="reportContainer" />
       <view:Help id="appHelp" />
      </mx:ViewStack>

         <mx:Canvas id="modal" styleName="modalbox" dropShadowEnabled="true" visible="{modalVisible}" showEffect="{wipedown}" hideEffect="{wipeup}" 
          height="80%" left="50" top="0" right="50" backgroundAlpha="1" 
          verticalScrollPolicy="auto" horizontalScrollPolicy="off">
       <view:ModalViewContainer id="modalViewContainer" />   
        </mx:Canvas>
 </mx:Canvas>

Inside the subcomponent, for example

<view:ReportContainer id="reportContainer" />

I have a tab navigator and more subcomponents each with three or four panels laid out inside them. The problem is that I get a scrollbar nightmare in this layout. Multiple scrollbars show up in the UI. What I want to happen is the panels to fill the view as much as possible and then only have scrollbars appear at the panel level inside the sub subcomponent.

Here is an example of the structure of the Report Container

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">

    <mx:VBox verticalGap="0" width="100%" height="100%" styleName="mainContainer">
        <mx:Canvas width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
      <mx:Button label="Home" right="15" click="exit()" />
            <mx:TabNavigator width="100%" height="100%" id="tabNav" change="tabNavChange()" />
        </mx:Canvas>
    </mx:VBox>

</mx:VBox>

I am using pureMVC so I have a mediator that manages the data for this view. The "tabnav" tab navigator is assigned more subcomponents dynamically in the mediator. Here is an example of one of those subcomponents that contains multiple panels:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" horizontalScrollPolicy="off">

    <mx:Panel width="100%" height="200" layout="vertical" title="Panel 1" status="Status Message" horizontalScrollPolicy="off">

     <!-- Lots of Content perhaps more panels or vboxes and hboxes -->

    </mx:Panel> 

    <mx:HBox width="100%" height="100%" left="0" right="0" top="200" bottom="0">

        <mx:Panel width="100%" height="100%" layout="vertical" title="Panel 2" horizontalScrollPolicy="off"> 

      <mx:Repeater id="foo" dataProvider="{foodata}"> 
       <!-- Lots of Content -->  
      </mx:Repeater>  

        </mx:Panel>


        <mx:Panel width="100%" height="100%" layout="vertical" title="Panel 3" horizontalScrollPolicy="off"> 

      <mx:Repeater id="bar" dataProvider="{bardata}"> 
       <!-- Lots of Content -->  
      </mx:Repeater>  

        </mx:Panel>

    </mx:HBox>

</mx:VBox>

Now the behavior I want is no scroll bars to appear except for the inner most panels. And I want the panels to flow automatically to fill up the "tabnav" element and the "tabnav" to fill up the viewstack that it sits within. I know about scroll policy settings. But it seems that if I get too aggressive there then I get unwanted clipping of content.

Does anyone have any pointers? How do you tame the scrollbars in complex layouts and ensure that the content flows properly? Am I just nesting too many layers in my layout?

The basic hierarchy looks like this

Application --> Canvas --> ViewStack --> VBox --> VBox --> Canvas --> TabNavigator --> VBox --> Panel, Panel, Panel

Part of the reason for so many layers of nesting is that I have various styles attached to the different levels that give my app's ui some definition and visual look and feel. A rounded box with a tab navigator inside it with visually styled panels within that.

I would know how to solve this problem if I went with fixed dimensions for all the elements. But I want a fluid layout that looks right on both a large monitor and a small monitor. Is this an unrealistic goal?

Are there any really good demonstrations of the box model, constraint based and complex fluid layouts for flex?