Collapsing a Spark BorderContainer dynamically does not collapse its children

protected function lbHideQuery_clickHandler(event:MouseEvent):void
        {
            if (lbHideQuery.selected)
            {
                lbHideQuery.label = "Show Query Panel";
                origHeight = canvas1.height;
                canvas1.height = 0;

            }
            else
            {
                lbHideQuery.开发者_如何学JAVAlabel = "Hide Query Panel";
                canvas1.height = origHeight;

            }
        } 
    ]]>
</mx:Script>
<mx:LinkButton  label="Hide Query Panel" id="lbHideQuery" toggle="true" click="lbHideQuery_clickHandler(event)"/>
<mx:Canvas id="canvas1" width="100%" height="20%" backgroundColor="0x353356">
<mx:VBox width="16%" height="90" minHeight="0" minWidth="0" id="vgbtns">
        <mx:Button label="Button 1"/>
        <mx:Button label="Button 2"/>
        <mx:Button label="Button 3"/>
</mx:VBox>      

but in Flex 4 when the BorderContainer collapses the buttons are still visible.

            }
        } 
    ]]>
</fx:Script>
<mx:LinkButton  label="Hide Query Panel" id="lbHideQuery" toggle="true" click="lbHideQuery_clickHandler(event)"/>
<s:BorderContainer width="100%" height="25%" backgroundColor="0x353356" id="bc1" >
    <s:layout>
        <s:HorizontalLayout paddingLeft="6"/>
    </s:layout>
    <s:VGroup width="16%" height="90" minHeight="0" minWidth="0" id="vgbtns">
        <s:Button label="Button 1"/>
        <s:Button label="Button 2"/>
        <s:Button label="Button 3"/>

    </s:VGroup>
</s:BorderContainer>

if (lbHideQuery.selected)
            {
                lbHideQuery.label = "Show Query Panel";
                origHeight = canvas1.height;
                canvas1.height = 0;
                canvas1.visible= false;

            }
            else
            {
                lbHideQuery.label = "Hide Query Panel";
                canvas1.height = origHeight;
                canvas1.visible= true;
            }