Need better understanding of how sizing is determined for Flex/Spark UI elements

In general, I haven't yet found a definitive way to get Flex and Spark containers to size themselves relative to their children. I have searched for good documentation for this concept many times but have yet to find anything that sufficiently explains the concepts.

A simple example of something I often want to do is to draw a border uniformly around a set of controls. The goal here would be to have all UI elements to size themselves automatically.

<s:BorderContainer>
  <s:HGroup>
    <s:Label text="l1" />
    <s:Label text="very long label 2" />
  </s:HGroup>
</s:BorderContainer>

I would want the Labels to size themselves based on the text property, and the HGroup should be as big as needed to contain labels and BorderContainer should only just contain that HGroup.

Now this simple example may or may not work as desired, I haven't yet figured out how to determine what the output will look like without trying the code. Does anyone know of a good way to understand this process so I can know deterministically how things will look?

Now the more complicated example that I am working on now. I have a class that extends the BorderContainer. Within the class I create an HGroup with 5 Labels as children of the HGroup. Then the HGroup is added as a child of the ExtendedBorderContainer (using addElement() method).

Then the new class is used in the application as:

<mx:ViewStack>
  <s:NavigatorContent>
    <my:ExtendedBorderContainer />
  </s:NavigatorContent>
  <!-- more NavigatorContents here -->
</mx:ViewStack>

I have tried various [max|min]height/width combinations and I can not get the desired layout, which is very tight borders around elements without extraneous space starting from the deepest Label children all the way up to the NavigatorContent.

Solution

Look here: http://livedocs.adobe.com/flex/3/html/help.html?content=size_position_3.html

It is not clear what your problem is. Regarding first part of your question: what do you mean saying "may or may not work as desired". This example should work and have layout that you described. Label sizes itself based on text property and so on. What behaviour do you get?

Second part: If you are hinting that your layout is ok in general but have extra spacing between items then look at the padding and gap properties of containers. Some containers have non zero default padding and gap and you have to override them manualy.