R – How to get Flex components to fill available space using Actionscript

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);
    }       
}

}