In Flex why does adding a child component to a VBox change it's width and height so much?

I am using Flex 3.

Here is my code:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![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)
            rollOverWindo开发者_如何学运维w.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();
        }
    ]]>
</mx:Script>

The bluebox is a popup that is controlled using methods in another View when the image is hovered over:

private function imageOver(event:MouseEvent):void
{
    event.stopPropagation();
    rollOverWindow.showOptions();
}

private function imageOut(event:MouseEvent):void
{
    event.stopPropagation();
    rollOverWindow.hideOptions();
}

This is with the Hbox inside the VBox:

This is without the Hbox:

Anybody know why this is happening?

You need to consider the paddings you have given to the VBox:

        rollOverWindow.setStyle("paddingTop", "10");
        rollOverWindow.setStyle("paddingBottom", "10");
        rollOverWindow.setStyle("paddingLeft", "15");
        rollOverWindow.setStyle("paddingRight", "15");

With these paddings and your HBox size of 50, the content of the VBox consumes 70px vertically. The VBox ist set to 50, so it will show scrollbars. Don't know why there is also a horizontal scrollbar.

Adding an extra VBox and some 100 percent widths and heights seems to fix the issue. Here is my new method:

private function createPopup():void
{
    rollOverWindow = new VBox();                

    var vbox:VBox = new VBox();
    vbox.setStyle("backgroundColor", "#578BBB");
    vbox.setStyle("horizontalAlign", "right");
    vbox.setStyle("borderStyle", "solid");
    vbox.setStyle("paddingTop", 10);
    vbox.setStyle("paddingBottom", 10);
    vbox.setStyle("paddingLeft", 10);
    vbox.setStyle("paddingRight", 10);
    vbox.setStyle("cornerRadius", 10);
    vbox.percentWidth = 100;
    vbox.percentHeight = 100;

    var hb:HBox = new HBox();
    hb.width = 100;
    hb.height = 10;
    hb.setStyle("backgroundColor", "red");

    vbox.addChild(hb);
    rollOverWindow.addChild(vbox);

    created = true;
}

What do you want to achieve? If you simply want the HBox to expand to 300x50 like the VBox, try not to give the HBox a width and height, maybe that way it will just take the dimensions of its child component.

As Jens mentioned, the reason you're getting the vertical scrollbar is because your VBox has a 10px padding on the top and bottom causing it to take up 70px. Either set the VBox's height to 70px or set the height of the HBox to 30px to compensate for the padding.

For the horizontal scrollbar, it's hard to say why it's showing up. I would just set the horizontalScrollPolicy to off on the VBox to get rid of it.