MXML: combobox wider than parent width

Question

I have a summary with a width set to 100%. However, when one of its elements is larger, the combobox also grows, creating scroll bars and other deformities in my application! How to save a combo box in its parent? NB if the list that falls is larger if the closed combo box remains smaller.

Example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<!-- I'm using a Canvas instead of a VBox because the VBox spaces the elements too far appart -->
    <mx:HBox id="tagsHBox" width="{formsHBox.width - 16}" x="8" y="8">
        <!-- This label should align with the labels in the left form -->
        <mx:Label text="Tags" id="tabLabel" width="{titleTxt.x + 4}" textAlign="right" />
        <!-- This textbox should spread accross both forms, that why it in a seperate HBox -->
        <mx:TextInput height="20" width="100%" />
    </mx:HBox>

    <mx:HBox id="formsHBox" x="8" y="{8 + tagsHBox.height}" width="{this.width-16}">

        <mx:Form id="leftForm" width="50%">
            <!-- Personal details -->
            <mx:FormHeading label="Personal Details" width="100%" />
            <mx:FormItem label="First name" width="100%">
                <mx:TextInput text="{person.firstName}" width="100%"/>
            </mx:FormItem>
            <mx:FormItem label="Last name" width="100%">
                <mx:TextInput text="{person.lastName}" width="100%"/>
            </mx:FormItem>
            <!-- And 15 more formItems :) -->
        </mx:Form>

        <mx:Form id="rightForm" width="50%">
            <!-- Address -->
            <mx:FormHeading label="Address" width="100%" />
            <mx:FormItem label="Street" width="100%">
                <mx:TextInput text="{person.address.street}" width="100%"/>
            </mx:FormItem>
            <mx:FormItem label="City" width="100%">
                <mx:TextInput text="{person.address.city}" width="100%"/>
            </mx:FormItem>

            <mx:FormItem label="Country" width="100%">

                <!-- This combobox right here is the troublemaker. There a
                     country named 'South Georgia and the South Sandwich
                     Islands' consising of a few small islands in the southern
                     pacific and a name which is too long for my innocent
                     unsuspecting combobox --> 
                <form:ComboBox id="countryCombo" height="20" width="100%"  
                        dataProvider="{model.systemDataModel.countries}" />
            </mx:FormItem>
            <!-- And 15 more formItems :) -->
        </mx:Form>
    </mx:HBox>
</mx:Canvas>

Answer 1

minWidth. - . , , HBox VBox, , , ComboBox. , , minWidth = "0" MinWidth, , , , .

Answer 2

, . comboBox comboBox , - ... HBox, " ", formItem formItem comboBox. , comboBox dataProvider, , ...

: , (autoLayout = "false" Form minWidth = "0" ComboBox)

<mx:Form autoLayout="false" verticalGap="12">
    <mx:FormItem label="Country" required="false" width="100%" direction="vertical">
        <mx:ComboBox id="countryComboBox" minWidth="0" width="100%" labelField="@name"/>
    </mx:FormItem>
    <mx:FormItem label="State" required="false" width="100%" direction="vertical">
        <mx:ComboBox id="stateComboBox" minWidth="0" width="100%" labelField="@name"/>
</mx:FormItem>
</mx:Form>

Answer 3

maxWidth ( ), ( , ) .

adobe: combobox: , , . , .