How to stretch and shrink with browser resize

Question

Is there a simple way to force stretch and shrink all
components and text as the browser window resizes? I tried 100%
width and height in the application tag but that only resizes the
main container. I want to also resize eveything inside the main
container and all the subcontainers including all text and all
graphic objects. With SVG this was simple. I also tried the
"Resize" effect but again that just resized the container and not
the elements inside the container. Any suggestions would be greatly
appreciated. Thanks.

Answer 1

Each child container is based on it's parent container. So if
you set a child height and width to 100%, it will stick to the
height and width constraints of the parent container. In other
words, you have to set the constraints from the top most parent
container, down to the bottom container and components. See this
slight modification of your example below. Setting both panels to
height/width = 100%, both panels resize accordingly as the window
is resized.
<?xml version="1.0"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="onResize();" resize="onResize();">
<mx:Script>
<![CDATA[
[Bindable] public var thisWidth:Number;
private function onResize():void{
thisWidth = this.width;
if (this.width >= 1020){
pnl1.setStyle("fontSize", 10);
if (this.width < 1020 && this.width >= 500){
pnl1.setStyle("fontSize", 8);
if (this.width < 500){
pnl1.setStyle("fontSize", 5);
]]>
</mx:Script>
<mx:Panel title="Panel 1" width="100%" height="100%"
id="pnl1" fontSize="10">
<mx:Panel title="Panel 2" width="100%" height="100%">
<mx:Canvas width="100%" height="100%">
<mx:Button label="Submit" horizontalCenter="0"
verticalCenter="0"/>
<mx:Label text="{thisWidth}" right="10" bottom="10"/>
</mx:Canvas>
</mx:Panel>
</mx:Panel>
</mx:Application>
Changing the font size is not as easy. All I can think of is
setting the font size based on the current size of the window, as
in my example above.