How to get Flex components to fill available space

Question

I was laying out my Flex components using mxml and had them working correctly. But then I wanted to switch them over to Actionscript because I wanted them to extend a base component that provides default functionality.

I've go the code working except that my components that used to fill the entire space using width="100%" and height="100%" appear to display just using the default sizes. Do you know How I can get them to take up the entire space again?

Here is a test component I am playing with that exhibits the problem.

Main.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:bbq="components.*" backgroundGradientColors="[#000000, #3333dd]" minWidth="480" minHeight="320" layout="vertical" verticalAlign="top" horizontalAlign="center" paddingLeft="0" paddingRight="0" paddingTop="30" paddingBottom="0" width="100%" height="100%" >

<mx:VBox backgroundColor="0xcccc66">
    <mx:ViewStack id="mainViewStack" width="100%" height="100%" color="0x323232">
        <bbq:TestComp id="testComp" height="100%" width="100%" />
        <bbq:ResultsBox />
    </mx:ViewStack>
</mx:VBox>    

TestComp.as

package components {

import mx.containers.VBox;

import mx.containers.Panel;

import flash.events.*;

public class TestComp extends VBox {
    private var p:Panel;

    function TestComp(){
        super();
        percentHeight = 100;
        percentWidth = 100;
    }

    override protected function createChildren():void {
        super.createChildren();
        p = new Panel();
        p.percentHeight = 100;
        p.percentWidth = 100;
        p.title = "Test Comp";
        addChild(p);
    }       
}

}

Answer 1

Add inherited method calls; calls to super() methods;

import mx.containers.VBox;
import mx.containers.Panel;
import flash.events.*;

public class TestComp extends VBox {
    private var p:Panel;

    function TestComp(){
        super(); // add this line

        percentHeight = 100;
        percentWidth = 100;
    }

    override protected function createChildren():void {
        super.createChildren(); // add this line

        p = new Panel();
        p.percentHeight = 100;
        p.percentWidth = 100;
        p.title = "Test Comp";
        addChild(p);
    }       
}

In you mxml:

<local:TestComp width="100%" height="100%" />

Answer 2

resizeToContent=true

Answer 3

I think I might know what it is. I think I explicitly set the width and height of one of the other components in the viewstack, and I think that affected the viewstack itself so that all of the other components that were added to it also go those dimensions.