Flex, resizing buttons in a horizontal list

Question

am having a problem with placing buttons in a horizontal list and having them not resize correctly (by width) when they are buttons of differing size. I am bringing them in dynamically through an xml file.

<mx:HorizontalList selectionColor="0x00ffffff"  borderAlpha="0" contentBackgroundAlpha="0" id="extrasList" styleName="extraList" dataProvider="{_extraArr}" itemClick="onExtraClick(event);">
                <mx:itemRenderer >
                    <mx:Component>
                        <mx:Canvas horizontalScrollPolicy="off" contentBackgroundColor="0xffffff" contentBackgroundAlpha="0" backgroundAlpha="0" backgroundColor="0x000000"  height="35">
                            <mx:Button paddingRight="18"  buttonMode="true" alpha="1"  height="35" label="{parentDocument.getData(data)}"   />  
                        </mx:Canvas>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:HorizontalList>

It seems that when I have multiple buttons of differing size, the button width defaults to the first one. So if my buttons are "Lorum", "Lorum", "Lorem Ipsum", then the last button is cut off to the width of the first one. I need to set these widths dynamically and not sure why this would be happening. The canvas container for the button is clipping the button width and not recognizing if it is a longer button.

One more thing:

I am using a button skin, not sure if this would cause this to happen. Here is the code:

<s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0" percentWidth="99"    >
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xEE2A7B" color.over="0xEE2A7B" />
                <s:GradientEntry color="0x9E1F63" color.over="0xffffff" />  
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

And defining the skin in my css like this:

upSkin:ClassReference('skins.pinkGradientButtonSkin');