How to prevent container in itemRenderer from exceeding width of list container?

Question

In a Flex Mobile project I have a simple itemRenderer where I'm trying to create an "bubble" texting effect, similar to ichat or iphone (just so you get what im going for). But if the text is longer than the screen it runs off, rather than just going down a line.

If I set Group thats holding the rectangle(to create the bubble effect) and the label to 100% it works and keeps it from exceeding the list containers bounds, BUT the group is always at 100% and looks bad, I'm trying to keep the "bubble" JUST AROUND the text.

Anyway so, at the top of my itemRenderer I tried specifying:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%">

And here's my layout I figured since msg_container has a width of 100% I was hoping bubble_lable_group would just not exceed that but...it doesnt...it just runs off. I tried setting a max width but that does not allow you to input percents. And just to say it 1 more time. I know if i set bubble_lable_group width to 100% it works, and keeps it from going off the edge, but then the rectangle "bubble" stretches all the way across and just looks bad.

<s:VGroup id="main_container" horizontalAlign="left" paddingBottom="10" paddingTop="10"
              verticalAlign="top" width="100%">

        <s:VGroup id="name_container" width="100%">
            <s:Label id="name_label" fontSize="20" fontWeight="bold" text="Name: " />
        </s:VGroup>

        <s:VGroup id="msg_container" width="100%" paddingLeft="20">
            <s:Group id="bubble_lable_group">
                <s:Rect id="the_bubble_shape" width="100%" height="100%" radiusX="15" radiusY="15" >
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="{grOne}"/>
                            <s:GradientEntry color="{grTwo}"/>
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
                <s:Label id="msg_txt" width="100%" text="msg text here"
                         fontSize="18" color="#FFFFFF" paddingTop="15" paddingRight="15" paddingBottom="15" paddingLeft="15"/>
            </s:Group>
        </s:VGroup>

    </s:VGroup>

Any Ideas or tricks I could pull to achieve the effect i'm going for and keep it all inside the parent List container? I'm stumped.

EDIT: Here's some screenshots to help illustrate the issue:

Answer 1

Well, it looks like you want to set the maxWidth property. Only, you can only set that with pixels, not percents. I am guessing that since you are on mobile, you don't want to be setting absolute pixels. Soooo, what if you did something a bit tricky? Data bind the max width to be the width of the renderer minus the padding of your message container...

<s:Group id="bubble_lable_group" maxWidth="{width - msg_container.paddingLeft}" >  

Feels like a hack, but it works for me :)

NOTE: Using the standard ItemRenderer class is quite inefficient in Mobile. It may not be an issue for you, but just be aware of it. See this presentation from 360Flex for more info on that: http://zaa.tv/2011/06/360flex-denver-2011-flex-performance-tips-and-tricks/