actionscript-3 - TabNavigator を使用する場合、動的に追加されたタブのコンテンツを整列する方法

Question

簡単な例を挙げると：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
        import com.example.Tab;

        private function addSecondTab(event:Event):void {
            tabs.addChild(new Tab("Second"));
        }
    ]]>
</mx:Script>
<mx:TabNavigator id="tabs" width="100%" height="100%">
    <mx:VBox horizontalAlign="center" verticalAlign="middle" label="#1">
        <mx:Label text="test"/>
    </mx:VBox>
</mx:TabNavigator>
<mx:Button label="Add Second Tab" click="addSecondTab(event)" />
</mx:Application>


package com.example {
import mx.containers.VBox;
import mx.controls.Label;
import mx.events.FlexEvent;

public class Tab extends VBox {
    public function Tab(name:String) {
        label = name;

        setStyle("horizontal-align", "center");
        setStyle("vertical-align", "middle"); 
    }

    override protected function createChildren():void {
        super.createChildren();

        var box:VBox = new VBox();
        box.setStyle("border-style", "solid");
        box.setStyle("border-thickness", 1);
        box.setStyle("border-color", 0xFF0000);

        var l1:Label = new Label();
        l1.text = "Hello!";
        box.addChild(l1);

        var l2:Label = new Label();
        l2.setStyle("fontWeight", "bold");
        l2.text = "This is a line of text...";
        box.addChild(l2);

        addChild(box);
    }
}
}

2 番目のタブ内でスタイル (境界線と配置) が適用されないのはなぜですか?