I have a Flex application that will shrink and grow vertically, but I do NOT want to ever, ever, ever see the Flex scroll bar. Ever! It has its place, but not for the entire app. That’s what the browser has a scroll bar for. And people are intimately familiar with that scroll bar, so I would much rather use that.

My Flex application makes use of the mx:ViewStack and each view will be the same width, but vary in height and even change interactively. At a minimum I want Flash to span the available browser window top to bottom. At a maximum I want the user to scroll with the browser scroll bar.

How I Did It
I disable the Flex scroll bars by modifying the policy value. Depending on how nested your application is (Canvas > VBox > Canvas > HBox > etc) you may have to do this at many levels. If there is a way to disable this by default, please have mercy on a brother and tell me now.

 
<mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" 
width="680"
horizontalScrollPolicy="off" 
verticalScrollPolicy="off">
 

Next I set the ViewStack to resizeToContent.

 
<mx:ViewStack id="mainStack" resizeToContent="true"
     <views:WelcomeView id="welcomeView" />
     <views:OrderFormView id="orderFormView" />
</mx:ViewStack>
 

Now I create a listener to handle any resize of the views. In my case this will always come up through the OrderFormView which is itself an mx:ViewStack.

 
import mx.events.ResizeEvent;
 
private function setupResize() : void
{
     orderFormView.addEventListener(ResizeEvent.RESIZE, formResize);
}
 

And then on formResize I use the ExternalInterface to issue the appropriate javascript to resize my DIV container to the height of my ViewStack plus a buffer of 30 pixels cuz I want a little play at the bottom.

 
private function formResize(e : ResizeEvent) : void
{
     ExternalInterface.call("setFlashHeight", mainStack.height + 30);
}
 

ExternalInterface.objectID is the ID of the DIV made available by Flex. Then in the page I have a javascript function to perform the actual resize.

 
function setFlashHeight(newHeight)
{
var viewportwidth;
var viewportheight;
 
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
 
// older versions of IE 
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
 
document.getElementById('consumer').style.height = (viewportheight > newHeight) ? viewportheight + 'px' : newHeight + 'px'; 
}
 

Something else you’ll likely want to do is scroll back to the top of the page after the resize.

 
ExternalInterface.call(
    "function() { scroll(0,0); }"
);
 

That’s it. The next thing to do is implement something like SWFFIT or write a little function that appropriately resizes the DIV upon a browser resize event (if the user resizes or removes a status bar or finder bar, etc.).