Spark container not hiding contents outside of its body - actionscript-3

Question

This is what what my screen looks like:
It is composed like this :
First container <s:HGroup>(900 X 100)--top black area
Second container <s:Group> (900 X 475)--middle white area
Third container <s:HGroup>--(900 X 100)--bottom black area
If the project were done with Flex 3, the middle area would be an <mx:Canvas>.
Now suppose I have one BorderContainer(125 X 475) and name it middleContainerChild. It is located on the right side of the middle area. When I set its y postion to -middleContainerChild.height, it should be located at y = -475, outside of the container's body. And as you can see in the image above, it has been placed there.
But other than with <mx:Canvas>, the image still shows, even though it is no longer within the <s:Group>s body, and it is rendered "on top" of the <s:HGroup>.
See the image below for more clarification:
If I use <mx:Canvas>, it is hidden away properly, but if I use a Spark container (not only a group, but any Spark container), it remains visible.
Has anyone else had this problem?

Answer 1

Read a bit about clipAndEnableScrolling property of GroupBase class.
Regards.

Answer 2

As 2DH gave me the hint, i have prepared this sample,
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="900" minHeight="672">
<fx:Declarations>
<s:Move
id="moveUp"
yFrom="0"
yTo="-475"
target="{helpWindow}"/>
<s:Move
id="moveDown"
yFrom="-475"
yTo="0"
target="{helpWindow}"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
private function buttonUp_clickHandler(event:MouseEvent):void
{
moveUp.play();
}
private function buttonDown_clickHandler(event:MouseEvent):void
{
moveDown.play();
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout gap="0"/>
</s:layout>
<s:BorderContainer
backgroundColor="#000000"
height="100"
width="100%"/>
<s:Group
height="475"
width="100%"
clipAndEnableScrolling="true">
<s:VGroup
left="0"
top="0">
<s:Button
label="Play Effect UP"
click="buttonUp_clickHandler(event)"/>
<s:Button
label="Play Effect DOWN"
click="buttonDown_clickHandler(event)"/>
</s:VGroup>
<s:BorderContainer
id="helpWindow"
backgroundColor="#CCCCCC"
y="{-helpWindow.height}"
right="0"
height="475"
width="125"
/>
</s:Group>
<s:BorderContainer
backgroundColor="#000000"
height="100"
width="100%"/>
</s:Application>
so now i have set my center container's clipAndEnableScrolling to true, and problem solved
Thanks to both the stack members:)