How to get clip content to work on mx TabNavigator?

Question

I have a TabNavigator and before that a ViewStack with TabBar that would not clip it's contents. It over flows the border or appears under other components positioned further down the screen. Has anyone run into this before?

Here is my code:

<mx:VDividedBox width="300" height="100%">
    <mx:TabNavigator id="firstViewStack" 
                borderStyle="solid" 
                width="100%"
                height="100%"
                clipContent="true">


        <s:NavigatorContent id="content1" 
                                    label="ITEMS">
            <views:Items height="550" width="100%" />
        </s:NavigatorContent>


        <s:NavigatorContent id="eventsContent" label="ITEMS 2">
            <views:Items height="880" width="100%"/>
        </s:NavigatorContent>
    </mx:TabNavigator>
</mx:VDividedBox>

UPDATE
I've included a animated gif of me resizing the tab content. As you can see the mask appears to be sized to the content rather than the available area??? Notice the border of the tab navigator along the size is being overlapped when resizing.

I set the minimum height on all of the content to lower values and height to 100% on all the content so it is not as high but you can see the content is still not getting clipped.

I also tried with a VGroup rather than a VDividedBox and it doesn't matter.

Here is another code example:

<s:VGroup top="50" left="50" width="400">
    <mx:TabNavigator width="100%" height="300">
        <s:NavigatorContent label="TAB">
            <s:Group width="100%" height="400">
                <s:Rect width="100%" height="100%">
                    <s:fill>
                        <s:SolidColor color="#ff0000"/>
                    </s:fill>
                </s:Rect>
            </s:Group>
        </s:NavigatorContent>
        <s:NavigatorContent label="TAB">
            <s:Group width="100%" height="400">
                <s:Rect width="100%" height="100%">
                    <s:fill>
                        <s:SolidColor color="#0000ff"/>
                    </s:fill>
                </s:Rect>
            </s:Group>
        </s:NavigatorContent>
    </mx:TabNavigator>
    <s:Button width="100%" label="HELLO WORLD"/>
    <s:Button width="100%" label="HELLO WORLD"/>
</s:VGroup>

Answer 1

I have implemented 2 approaches - one with a Scroller and another with autosize.

Here is an example

Here is the code:

<?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="955" minHeight="600">

    <s:HGroup width="100%" height="100%" left="50" top="50">

        <!-- Using Scroller-->
        <s:VGroup width="400">

            <mx:TabNavigator width="100%" height="300">
                <s:NavigatorContent label="TAB" width="100%" height="100%">

                    <s:Scroller width="100%" height="100%">
                        <s:Group>
                            <s:Group width="100%" height="400">
                                <s:Rect width="100%" height="100%">
                                    <s:fill>
                                        <s:SolidColor color="#ff0000"/>
                                    </s:fill>
                                </s:Rect>
                            </s:Group>
                        </s:Group>  
                    </s:Scroller>

                </s:NavigatorContent>
                <s:NavigatorContent label="TAB" width="100%" height="100%">

                    <s:Scroller width="100%" height="100%">
                        <s:Group>
                            <s:Group width="100%" height="600">
                                <s:Rect width="100%" height="100%">
                                    <s:fill>
                                        <s:SolidColor color="#0000ff"/>
                                    </s:fill>
                                </s:Rect>
                            </s:Group>
                        </s:Group>  
                    </s:Scroller>
                </s:NavigatorContent>
            </mx:TabNavigator>

            <s:Button width="100%" label="HELLO WORLD"/>
            <s:Button width="100%" label="HELLO WORLD"/>
        </s:VGroup>

        <s:Spacer width="60"/>
        <!-- Using Autosize-->

        <s:VGroup top="50" left="50" width="400">

            <mx:TabNavigator width="100%" minHeight="300" resizeToContent="true" >
                <s:NavigatorContent label="TAB" width="100%" height="100%">

                    <s:Group width="100%" height="400">
                        <s:Rect width="100%" height="100%">
                            <s:fill>
                                <s:SolidColor color="#ff0000"/>
                            </s:fill>
                        </s:Rect>
                    </s:Group>

                </s:NavigatorContent>
                <s:NavigatorContent label="TAB" width="100%" height="100%">

                    <s:Group width="100%" height="500">
                        <s:Rect width="100%" height="100%">
                            <s:fill>
                                <s:SolidColor color="#0000ff"/>
                            </s:fill>
                        </s:Rect>
                    </s:Group>

                </s:NavigatorContent>
            </mx:TabNavigator>

            <s:Button width="100%" label="HELLO WORLD"/>
            <s:Button width="100%" label="HELLO WORLD"/>
        </s:VGroup>

    </s:HGroup>

</s:Application>