Flex 4 resize groups within a group - apache-flex

Question

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?
Shouldn'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>

Answer 1

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.