Flex 4 resize groups within a group

I am trying to automatically resize the children within an s:Group. The children are another s:Group and a H:Group. Each have a percentage width of 10% and 90% each. The problem is that when one of the groups is resized (using a transition and rotation combination in the Skin), the other group does not automatically resize to fill the space?

Sho开发者_开发问答uldn't Flex do this automatically? or do I have to code this?

<s:Group
    id="listsGroup"
    width="100%"
    height="255"
    >

    <s:Label text="LIST WITH HEADER TEST" styleName="h1" />

    <s:Group
        id="listsGroupSavedSearches"
        width="10%"
        height="255"
        >
        <components1:ListWithHeader
            id="categories11"
            dataProvider="{listModel}"
            headerLabel="Saved Searches"
            allowMultipleSelection="true"
            top="10" bottom="0"
            left="0" width="10%"
            />
    </s:Group>

    <s:HGroup left="160" width="90%" height="150" top="50" gap="6">
         <components1:ListWithHeader
            id="categories1"
            dataProvider="{listModel}"
            headerLabel="Category1 "
            allowMultipleSelection="true"
            width="100%"
            height="150"
            />
        <components1:ListWithHeader
            id="categories2"
            dataProvider="{listModel}"
            headerLabel="Category2"
            allowMultipleSelection="true"
            width="100%"
            height="150"
            />
        <components1:ListWithHeader
            id="categories3"
            dataProvider="{listModel}"
            headerLabel="Category3"
            allowMultipleSelection="true"
            width="100%"
            height="150"
            />
    </s:HGroup>
</s:Group>

The best way to approach something like this is to tie into the Flex Component lifecycle methods, specifically updateDisplayList(). UpdateDisplayList() is used to position and size your children. It has two parameters, the height and width of your component. You can then write an algorithm to size and position your children based on the component's height and width.

MXML does this all under the hood, kind of in a black magic sort of way; but you'll gain more control if you write the layout code yourself.