Using a custom Viewstack inside another gives an error

Question

Hi, can anybody tell me why using two custom ViewStacks components inside one another I get this (workspace log) error?
"Custom component model has recursive definition: components.ViewStack"
My component ViewStack.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:ViewStack xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
</mx:ViewStack>
MyApplication.mxml
    <c:ViewStack id="views" >
        <c:ViewStack id="mainViews2" >   
        </c:ViewStack>
    </c:ViewStack>  
Any combination involving the real mx:ViewStack works fine.
Using FlashBuilder 4.5
Thanks

Answer 1

Thank you. This did the trick
package components {
    import mx.containers.ViewStack;
    public class ViewStack extends mx.containers.ViewStack {
        public function ViewStack() {
            super();
            percentWidth = 100;
            percentHeight = 100;