title: Flex: Custom composite component in ActionScript -- problems with percentWidth/percentHeight
body: <p>I've done tons of research and read the <a href="http://livedocs.adobe.com/flex/3/html/help.html?content=size_position_2.html" rel="nofollow">Adobe Live Docs</a> till my eyes bled trying to figure this out.</p>
  
  <p>I am building a composite custom component in ActionScript, and would like the sub controls to be laid out horizontally. This works fine by adding them to an <code>HGroup</code> and adding HGroup to the component, the problem comes with percentage based sizing. </p>
  
  <p>I need <code>_horizontalGroup:HGroup</code> to size it self based on the size of its container.</p>
  
  <p>stepping through the code shows that the parent properties of each UIComponent are...</p>
  
  <ul>
  <li>_horizontalGroup.parent = ReportGridSelector</li>
  <li>ReportGridSelector.parent = grpControls</li>
  </ul>
  
  <p>If grpControls has an explicit size, shouldn't ReportGridSelector have its size as well?</p>
  
  <p>The custom component is implemented like this...<br>
  NOTE: ReportControl extends UIComponent and contains no sizing logic  </p>
  
  <pre><code>public class ReportGridSelector extends ReportControl{
  
    /*other display objects*/
    private var _horizontalGroup:HGroup;
  
      public function ReportGridSelector(){
          super();
          percentHeight = 100;
          percentWidth = 100;
      }
  
      override protected function createChildren():void{
  
          super.createChildren();
  
          if(!_horizontalGroup){
              _horizontalGroup = new HGroup();
  
              //I WANT SIZE BY PERCENTAGE, BUT THIS DOESN'T WORK
              _horizontalGroup.percentWidth = 100;
              _horizontalGroup.percentHeight = 100;
  
              //EXPLICITLY SETTING THEM WORKS, BUT IS STATIC :-(
              //_horizontalGroup.width = 200;
              //_horizontalGroup.height = 200;
              addChild(_horizontalGroup);
          }
      }
  }
  </code></pre>
  
  <p>Consuming MXML code</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; 
  &lt;s:VGroup id="grpControls" width="200" height="200"&gt;
       &lt;ReportControls:ReportGridSelector width="100%" height="100%"/&gt;
  &lt;/s:VGroup&gt;
  </code></pre>
  
  <p>If I explicitly define <code>_horizontalGroup</code>'s <code>width</code> and <code>height</code> properties, everything displays fine. If I try <code>_horizontalGroup.percentWidth</code> or <code>percentHeight</code>, all the controls get scrunched together.</p>
  
  <p>Any thoughts as to what is going on?</p>