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?
Read a bit about
clipAndEnableScrollingproperty ofGroupBaseclass.Regards.