display data in multiple rows

hi guys

I am using <mx:HorizontalList> to display id's  from a list. this is my code

<mx:HorizontalList width="848" height="54" dataProvider="{myData.myList}"  columnWidth="150" borderStyle="none" cornerRadius="15" >
<mx:itemRenderer >					
<mx:Component>	
					 
<mx:HBox height="100%" verticalAlign="middle" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:HBox verticalAlign="middle" horizontalAlign="right" >  
<mx:LinkButton id="projectName" label="{data.id}" /> -- The problem is here when displaying the id
</mx:HBox>											
</mx:HBox>

</mx:Component>					 
</mx:itemRenderer>
</mx:HorizontalList>

Select allOpen in new window

Whenever myData.myList contains a large number of items,  <mx:LinkButton id="projectName" label="{data.id}" />  overflows and i see a horizontal scroll bar.

I do not want a scrollbar , instead i want to move over to the second row.

for example if myData.myList has 10 items, i want to show the first 6 ids in the first row and the next 4 ids in second row instead of showing all 10 ids in one row with a scrollbar.

any idea how i can acchieve this?

thanks.