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>