Manage hboxs in Vbox flex

I have VBox that contains two Hbox. The first hbox is not included in the layout while second is. After a event occurs, first hbox is visible & included in the layout. But the problem is the second hbox does not move down & first & second are overlapping. I tried using the co ordinates x,y, move it does not work. Here is the code below.

<mx:VBox id="quesBx" >
    <mx:HBox id="errBx" width="698" height="50" borderColor="#ff0000" borderStyle="solid" visible="false" 
             paddingTop="12" paddingLeft="15" 
             verticalScrollPolicy="off">
        <mx:Image source="{CommonImages.EXCLAMATION_ICON}" width="20"/>
        <mx:Text color="#ff0000" fontSize="14" p开发者_C百科addingLeft="-100" paddingTop="-18" > 
            <mx:htmlText> 
                <![CDATA[
                <
                ]]>
            </mx:htmlText>
        </mx:Text>
    </mx:HBox>
    <mx:Spacer height="5"/>
    <mx:HBox id ="btnBx" textAlign="center"  paddingRight="20" bottom="0"     verticalAlign="bottom" horizontalAlign="right">
        <mx:Spacer width="435"/>
        <mx:Button id="btn_Cancel" label="Cancel" width="120"/>
        <mx:Button id="btn_Submit" label="Submit" click="submit(event)" width="120"/>
    </mx:HBox>

after the calling submit

this.quesBx.height += 50;
btnBx.y += 50;

Why are both of them overlapping & how can i get second box after first one.

Make sure you're setting includeInLayout=true when you set visible=true on the first HBox.