Flex Itemrenderer content overflow

There seems to be a problem with MXItemRenderer derivative classes resizing percentage-based widths.

datagrid:-

<mx:DataGrid id="dataGrid" dataProvider="{dataProvider}"
includeIn="data"
sortableColumns="false"
resizableColumns="false"
draggableColumns="false"
verticalScrollPolicy="on"
wordWrap="true"
variableRowHeight="true"
rowCount="10" maxHeight="500" width="100%">
<mx:columns>
<mx:DataGridColumn headerText="new data" itemRenderer="com.test.NewItemRenderer"/>
</mx:columns>
</mx:DataGrid>

newItemRenderer.mxml:-

<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"  focusEnabled="true" width="100%">
<s:Label text="{data}" lineBreak="toFit" width="100%"/>
</s:MXDataGridItemRenderer>

will cause the content to spill over into the next row (or clip if clipAndEnableScrolling is true) when the itemrenderer is recycled during scrolling the datagrid.
If I set the width to a pixel size it will draw correctly.

Only thing similar I have come across is this issue on stackoverflow

If anyone has a better workaround that can keep the percentage based width I’d love to hear it!