Adobe Flex 3: width and height specified in percentage not working for children of a viewstack

I have a ViewStack which is dataProvider for a TabBar. There are two VBoxs as children for this ViewStack. It works fine with absolute values for width and height for these VBoxs, but when specified in percentages, the VBox uses all the available space (100%) for any percentage value. Please find the code and screen shots below.

Can someone please explain why it is getting rendered so? And also how can children of a ViewStack be aligned to center? There is no horizontalAlign property for ViewStack and it is not working with horizontalCenter= "0".

Code:

<mx:ViewStack id="viewStack" width="100%" height="100%" selectedIndex="0" horizontalCenter="0" textAlign="center">

    <mx:VBox label="Tab 1" width="25%" height="10%" borderThickness="2" borderColor="red"
        borderStyle="solid" horizontalAlign="left">

        <mx:Text text="This is tab 1" />

    </mx:VBox>

    <mx:VBox label="Tab 2" width="30%" height="20%" borderThickness="2" borderColor="haloBlue"
        borderStyle="solid">

        <mx:Text text="This is tab 2" />

    </mx:VBox>

</mx:ViewStack>

Image 1(with absolut开发者_如何学编程e values):

Image 2(with width="25%" and height="10%"):

Thanks, Anji

---

Simply use an outer container that fills the space (which is what you want in a view stack) and put your content inside. That outer container can center your inner content. Like this:

<mx:Box label="Tab 1" width="100%" height="100%" horizontalAlign="center">
    <mx:VBox  width="25%" height="10%" borderThickness="2" borderColor="red" 
              borderStyle="solid" >
        <mx:Text text="This is tab 1" />
    </mx:VBox>
</mx:Box>

---

Please Refer the link

View Stack Container in that please read the

Sizing the children of a ViewStack container

by that U might get the clear Idea

If needed use another container inside the vbox

        ~~~ HappY Coding ~~~