title: In Flex why does adding a child component to a VBox change it's width and height so much?
body: <p>I am using Flex 3.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
      &lt;mx:Script&gt;
          &lt;![CDATA[
              import mx.containers.HBox;
              import mx.managers.PopUpManager;
  
          [Bindable]private static var openRollOver:AssemblySearchResultContentsRollOver;
          private var rollOverWindow:VBox;
          private var created:Boolean = false;
  
          private function createPopup():void
          {
              rollOverWindow = new VBox();
              rollOverWindow.width = 300;
              rollOverWindow.height = 50;
              rollOverWindow.setStyle("backgroundColor", "#578BBB");
              rollOverWindow.setStyle("paddingTop", "10");
              rollOverWindow.setStyle("paddingBottom", "10");
              rollOverWindow.setStyle("paddingLeft", "15");
              rollOverWindow.setStyle("paddingRight", "15");
  
              var hbox:HBox = new HBox();
              hbox.width = 200;
              hbox.height = 50;
              hbox.setStyle("backgroundColor", "red");
  
              // If I comment out this line then the VBox is 300*50, if I leave it in then
              // the VBox is multiple times bigger (lots of scrolling vertical and horizontal)
              rollOverWindow.addChild(hbox);
              created = true;
          }
  
          public function showOptions():void
          {
              if (!created)
                  createPopup();
              var pt:Point = new Point(0, 0);
              pt = localToGlobal(pt);
              rollOverWindow.x = pt.x + 80;
              rollOverWindow.y = pt.y + 45;
              PopUpManager.addPopUp(rollOverWindow, this);
              openRollOver = this;
          }
  
          public function hideOptions():void
          {
              PopUpManager.removePopUp(rollOverWindow);
              openRollOver = null;
          }
  
          private static function closeOpenOptions():void
          {
              if(openRollOver != null)
                  openRollOver.hideOptions();
          }
      ]]&gt;
  &lt;/mx:Script&gt;
  </code></pre>
  
  <p></p>
  
  <p>The bluebox is a popup that is controlled using methods in another View when the image is hovered over:</p>
  
  <pre><code>private function imageOver(event:MouseEvent):void
  {
      event.stopPropagation();
      rollOverWindow.showOptions();
  }
  
  private function imageOut(event:MouseEvent):void
  {
      event.stopPropagation();
      rollOverWindow.hideOptions();
  }
  </code></pre>
  
  <p>This is with the Hbox inside the VBox:
  <img src="https://i.stack.imgur.com/4EgFb.png" alt="With Hbox"></p>
  
  <p>This is without the Hbox:<br>
  <img src="https://i.stack.imgur.com/fXL3u.png" alt="Without HBox"></p>
  
  <p>Anybody know why this is happening?</p>