So props to my buddy Blaise for helping me on this.  I also want to mention a post that was helpful in getting started:  http://danielmclaren.net/2008/04/expanding-resizing-a-flash-swf-using-javascript

Scenario:  Using width="100%" height="100%" for your Flex application, you want to be able to resize the swf indirectly by resizing a container div on your webpage.  the container div will then make additional room on the page for the flash.

Background:  I have a project where the initial height of my flex application need to be set to a specific height in order to accomodate the site design.  In my case, 224px.  I have a couple controls that are not shown by default and have a larger height than the application itself, but upon user interaction, they transition from bottom to top.  The problem is that since there is a specific height set when the page loads, you need to push the rest of the page contents down to make some additional swf room.  Without this additional room, part of your swf would be cut off by the container div... which is baddddd.

ok so I spent a few hours looking at different approaches to this problem, and for the majority of solutions, I noticed that people were resizing the flash/flex but only a few were resizing a container for the flash.  Using the Externalinterface api, you can have flash determine the size required and then use that to animate your webpage via javascript.  Thanks to Daniel McLaren for addressing the setInterval method in js.

Here is my javascript:

<script language="JavaScript" type="text/javascript">
var interId;
    var newht;
    var viewht;
    function setFlashHeight(newHeight)   
    {
        newht = newHeight;
        var currentHt = document.getElementById('divFlash').style.height.replace('px','');
        viewht = Number(currentHt);
        interId = setInterval(resizeFlash, 20);
    }
   
    function resizeFlash()
    {
        if(Math.abs(viewht - newht) <= 10)
        {
            document.getElementById('divFlash').style.height = newht +'px';
            clearInterval(interId);
           
        }
        else if(viewht < newht)
        {
            viewht = viewht +10;
            document.getElementById('divFlash').style.height = viewht +'px';
           
        }
        else
        {   
            viewht = viewht -10;
            document.getElementById('divFlash').style.height = viewht +'px';
           
        }
    }

So inside Flex, when I need more room to display properly I can call the ExternalInterface and pass the new height required for the application. In this example, Im simply passing a numerical value. So if I want my available div area to go from 224px to 500px (and back) one ExternalInterface call would contain 224 as a param, and the other would contain 500. In case you aren't familiar, setInterval(function, time(in ms)) tells javascript to execute the given function every t milliseconds until clearInterval(interId) is called.Since we are resizing the DIV on the page, everything below the DIV will move down to accomodate the new height.  And instead of simply (and abruptly) opening, this method will give you a gradual open/close animation to avoid producing whiplash. 

Hope this helped.