Flex 4 dynamically resize parent container to contain children - apache-flex

Question

Is there an easy way to make a parent container (eg Group) resize when it's children resize?
Below is a little example app. When I put the 200x200 'food' in the 'stomach' the stomach & it's containing 100x100 'body' should resize to contain the food.
Any ideas?
(from this gist http://gist.github.com/301292)
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024"
minHeight="768"
creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void {
}
protected function eatFoodTrigger_clickHandler(event:MouseEvent):void {
var food:Border = new Border();
food.setStyle('backgroundColor', 0x15DCA9);
food.width = 200;
food.height = 200;
stomach.addElement(food);
}
]]>
</fx:Script>
<s:Group verticalCenter="0" horizontalCenter="0">
<s:layout>
<s:VerticalLayout horizontalAlign="center" />
</s:layout>
<s:Label fontSize="24" text="The 100x100 pink/brown body has a stomach inside it.
Press eat and the stomach gets 200x200 'food' added to it.
I want the body and the stomach to expand to fit the food." width="200">
</s:Label>
<s:Border id="body"
backgroundColor="0x333333"
minWidth="100"
minHeight="100"
borderColor="0xFF4466"
borderWeight="5">
<s:Group id="stomach">
</s:Group>
</s:Border>
<s:Button id="eatFoodTrigger" click="eatFoodTrigger_clickHandler(event)" label="eat" />
</s:Group>
</s:Application>

Answer 1

Ok so it was a bug in the flex 4 sdk, and it's been fixed. Awesome.
From: http://forums.adobe.com/thread/575252
Your example works for me in a recent
build. Perhaps it was a bug in an old
build. Try one of the new nightly
builds:
http://opensource.adobe.com/wiki/display/flexsdk/DownloadFlex4
-Ryan

Answer 2

Obviously, this is a bit too late, but you could have overriden the addElementAt-method and added some functionality for resizing there. Below, you can see how addElementAdd() should/could be overridden.
//This would be placed in a custom component that extends Group. Your stomach would be this component.
override public function addElementAt(element:IVisualElement, index:int):IVisualElement
{
super.addElementAt(element, index);
ChangeWatcher.watch(element, "width", function():void{ resizeHandler(element) });
ChangeWatcher.watch(element, "height", function():void{ resizeHandler(element) });
}
private function resizeHandler(el:IVisualElement):void
{
var element:DisplayObject = el as DisplayObject;
//Rest of the resizing code.
}
I know this worked for flex3 and Canvas, so it should also work with flex4 and Group.