I wrestled with this for a few days so I’m posting it here in hopes that it will help someone. For whatever reason I had a really difficult time finding out the solution – to something that should have been very basic. Here is a sample application where one would expect that the scroll bars would appear on the child mx:HBox:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo" layout="vertical"
minWidth="800"
minHeight="600">
<fx:Script>
<![CDATA[
[Bindable]
private var dp:Array = new Array(30);
]]>
</fx:Script>
<mx:HDividedBox width="100%" height="100%">
<mx:Panel width="15%" height="100%">
<mx:Label text="left"/>
</mx:Panel>
<mx:Box id="content" width="85%" height="100%" verticalScrollPolicy="auto" horizontalScrollPolicy="auto" >
<mx:Repeater dataProvider="{dp}">
<mx:Label text="hello!" />
</mx:Repeater>
</mx:Box>
</mx:HDividedBox>
</mx:Application>
I would have expected the HBox#content to have scroll bars, instead the scroll bars show up on the main application – why I have not figured out. However the solution (hack?) is to simply wrap the HBox#content in a mx:Canvas tag and put the width, height, and scrollbar settings there. Here is my solution (Let me know if you have a beter one!) :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo" layout="vertical"
minWidth="800"
minHeight="600">
<fx:Script>
<![CDATA[
[Bindable]
private var dp:Array = new Array(30);
]]>
</fx:Script>
<mx:HDividedBox width="100%" height="100%">
<mx:Panel width="15%" height="100%">
<mx:Label text="left"/>
</mx:Panel>
<mx:Canvas width="85%" height="100%" verticalScrollPolicy="auto" horizontalScrollPolicy="auto" >
<mx:Box id="content" >
<mx:Repeater dataProvider="{dp}">
<mx:Label text="hello!" />
</mx:Repeater>
</mx:Box>
</mx:Canvas>
</mx:HDividedBox>
</mx:Application>