Spark RichEditableText word wrap with percent width and fixed height

I know this question has been asked before but the other solutions didn't work for me quite well.

here's my sample application.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="200" height="300">
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.TextConverter;
        ]]>
    </fx:Script>

    <s:Group top="0" bottom="0" left="0" right="0">
        <s:VGroup width="100%" gap="10">
            <s:RichEditableText id="text1" editable="false" width="100%" height="60" minWidth="0" 
                                textFlow="{TextConverter.importToFlow('some loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text', TextConverter.TEXT_FIELD_HTML_FORMAT)}" />
        </s:VGroup>
    </s:Group>

</s:WindowedApplication>

I tried to mimic my application structure as much as possible. basically I want the text in 'text1' to wrap around. This won't work if i set the height to 60 pixel which is what I want. But if i change height of text1 to 100% (or remove height all together) then all of sudden I get word wrap. It seems like it doesn't like fixed height. I'm not sure what's going on here.. adding minWidth="0" didn't help nor setting lineBreak="toFit".

any ideas?

Solution

Try to set width as explicit value