Flex provides several ways for controlling the size of components. You can do the following tasks:

• SetFlex to automatically determine and use default component sizes.
• Specify pixel sizes.
• Specify component size as a percentage of the parent container.
• Combine layout and sizing by specifying a constraint-based layout.

For information on constraint-based layout, see Using constraints to control component layout.

Flex sizing properties

Several Flex properties affect the size of components. As a general rule, you use only a few properties for most applications, but a more complete understanding of these properties can help you understand the underlying Flex sizing mechanism and how Flex sizing properties interrelate. For information on the rules that Flex applies to determine the sizes of components based on the properties, see Determining and controlling component sizes.

Commonly used sizing properties

If you are not creating custom components, you typically use the following basic properties to specify how a component is sized:

• The height, width, percentHeight, and percentWidth properties specify the height and width of a component. In MXML tags, you use the height and width properties to specify the dimensions in pixels or as percentages of the parent container size. In ActionScript, you use the height and width properties to specify the dimensions in pixels, and use the percentHeight and percentWidth properties to specify the dimensions as a percentage of the parent container.
• The minHeight, minWidth, maxHeight, and maxWidth properties specify the minimum and maximum dimensions that a component can have if Flex determines the component size. These properties have no effect if you explicitly set the width or height in pixels.

The following tables include some properties that are only used by developers of custom components, particularly those who must implement a custom measure() method.

Basic sizing characteristics and properties

The following characteristics and their associated properties determine the size of the component:

Maximum and minimum dimensions

The following characteristics determine the minimum and maximum default and percentage-based dimensions that a component can have. They do not affect values that you set explicitly or dimensions determined by using constraint-based layout.

Determining and controlling component sizes

Flex determines the sizes of controls and containers based on the components and their properties and how you can use Flex properties to control the sizes.

Basic sizing property rules

The following rules describe how you can use Flex sizing properties to specify the size of a component:

• Any dimension property that you set overrides the corresponding default value; for example, an explicitly set height property overrides any default height.
• Setting the width, height, maxWidth, maxHeight, minWidth, or minHeight property to a pixel value in MXML or ActionScript also sets the corresponding explicit property, such as explicitHeight or explicitMinHeight.
• The explicit height and width and the percentage-based height and width are mutually exclusive. Setting one value sets the other to NaN; for example, if you set height or explicitHeight to 50 and then set percentHeight to 33, the value of the explicitHeight property is NaN, not 50, and the height property returns a value that is determined by the percentHeight setting.
• If you set the height or width property to a percentage value in an MXML tag, you actually set the percentage-based value, that is, the percentHeight or percentWidth property, not the explicit value. In ActionScript, you cannot set the height or width property to a percentage value; instead, you must set the percentHeight or percentWidth property.
• When you get the height and width properties, the value is always the actual height or width of the control.

Determining component size

During the measurement pass, Flex determines the components' default (also called measured) sizes. During the layout pass, Flex determines the actual sizes of the components, based on the explicit or default sizes and any percentage-based size specifications.

The following list describes sizing rules and behaviors that apply to all components, including both controls and containers. For container-specific sizing rules, see Determining container size. For detailed information on percentage-based sizing, see Using percentage-based sizing.

• If you specify an explicit size for any component (that is not outside the component's minimum or maximum bounds), Flex always uses that size.
• If you specify a percentage-based size for any component, Flex determines the component's actual size as part of the parent container's sizing procedure, based on the parent's size, the component's requested percentage, and the container-specific sizing and layout rules.
• The default and percentage-based sizes are always at least as large as any minimum size specifications.
• If you specify a component size by using a percentage value and do not specify an explicit or percentage-based size for its container, the component size is the default size. Flex ignores the percentage specification. (Otherwise, an infinite recursion might result.)
• If a child or set of children require more space than is available in the parent container, the parent clips the children at the parent's boundaries, and, by default, displays scroll bars on the container so users can scroll to the clipped content. Set the clipContent property to false to configure a parent to let the child extend past the parent's boundaries. Use the scrollPolicy property to control the display of the scroll bars.
• If you specify a percentage-based size for a component, Flex uses the viewable area of the container in determining the sizes.
• When sizing and positioning components, Flex does not distinguish between visible and invisible components. By default, an invisible component is sized and positioned as if it were visible. To prevent Flex from considering an invisible component when it sizes and positions other components, set the component's includeInLayout property to false. This property affects the layout of the children of all containers except Accordion, FormItem, or ViewStack. For more information, see Preventing layout of hidden controls.

Determining container size

Flex uses the following basic rules, in addition to the basic component sizing rules, to determine the size of a container:

• Flex determines all components' default dimensions during the measurement pass, and uses these values when it calculates container size during the layout pass.
• If you specify an explicit size for a container, Flex always uses that size, as with any component.
• If you specify a percentage-based size for a container, Flex determines the container's actual size as part of the parent container's sizing procedure, as with any component.
• A percentage-based container size is advisory. Flex makes the container large enough to fit its children at their minimum sizes. For more information on percentage-based sizing, see Using percentage-based sizing.
• If you do not specify an explicit or percentage-based size for a container, Flex determines the container size by using explicit sizes that you specify for any of its children, and the default sizes for all other children.
• Flex does not consider any percentage-based settings of a container's children when sizing the container; instead, it uses the child's default size.
• If a container uses automatic scroll bars, Flex does not consider the size of the scroll bars when it determines the container's default size in its measurement pass. Thus, if a scroll bar is required, a default-sized container might be too small for proper appearance.

Each container has a set of rules that determines the container's default size. For information on default sizes of each control and container, see the specific container sections in the Adobe Flex Language Reference, and in Application Container; Using Layout Containers; and Using Navigator Containers.

Example: Determining an HBox container and child sizes

The following example code shows how Flex determines the sizes of an HBox container and its children. In this example, the width of the HBox container is the sum of the default width of the first and third buttons, the minimum width of the second button (because the default width would be smaller), and 16 for the two gaps. The default width for buttons is based on the label text width; in this example it is 66 pixels for all three buttons. The HBox width, therefore, is 66 + 70 + 66 + 16 = 218. If you change the minWidth property of the second button to 50, the calculation uses the button's default width, 66, so the HBox width is 214.

When Flex lays out the application, it sets the first and third button widths to the default values, 66, and the second button size to the minimum width, 70. It ignores the percentage-based specifications when calculating the final layout.

<?xml version="1.0"?>
<!-- components\HBoxSize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:HBox id="hb1">
        <mx:Button id="b1" 
            label="Label 1" 
            width="50%"/>
        <mx:Button id="b2" 
            label="Label 2" 
            width="40%" 
            minWidth="70"/>
        <mx:Button id="b3" 
            label="Label 3"/>
    </mx:HBox>
    
    <mx:Form>
        <mx:FormItem label="HBox:">
            <mx:Label text="{hb1.width}"/>
        </mx:FormItem>
        <mx:FormItem label="Button #1:">
            <mx:Label text="{b1.width}"/>
        </mx:FormItem>
        <mx:FormItem label="Button #2:">
            <mx:Label text="{b2.width}"/>
        </mx:FormItem>
        <mx:FormItem label="Button #3">
            <mx:Label text="{b3.width}"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>
The executing SWF file for the previous example is shown below:

In the following example, the HBox width is now 276 pixels, 50% of 552 pixels, where 552 is the Application container width of 600 minus 48 pixels for the 24-pixel left and right container padding. The button sizes are 106, 85, and 66 pixels, respectively. The third button uses the default size. The variable width button sizes are five-ninths and four-ninths of the remaining available space after deducting the default-width button and the gaps, and the 1-pixel-wide border.

If you set the HBox width property to 20%, however, the HBox width is not 120 pixels, 20% of the Application container width, because this value is too small to fit the HBox container's children. Instead it is 200, the sum of 66 pixels (the default size) for buttons 1 and 3, 50 pixels (the specified minimum size) for button 2, 16 pixels for the gaps between buttons, and 2 pixels for the border. The buttons are 66, 50, and 66 pixels wide, respectively.

<?xml version="1.0"?>
<!-- components\HBoxSizePercent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600">
    <mx:HBox id="hb1" width="50%" borderStyle="solid">
        <mx:Button id="b1" 
            label="Label 1" 
            width="50%"/>
        <mx:Button id="b2" 
            label="Label 2" 
            width="40%" 
            minWidth="50"/>
        <mx:Button id="b3" 
            label="Label 3"/>
    </mx:HBox>
    
    <mx:Form>
        <mx:FormItem label="HBox:">
            <mx:Label text="{hb1.width}"/>
        </mx:FormItem>
        <mx:FormItem label="Button #1:">
            <mx:Label text="{b1.width}"/>
        </mx:FormItem>
        <mx:FormItem label="Button #2:">
            <mx:Label text="{b2.width}"/>
        </mx:FormItem>
        <mx:FormItem label="Button #3">
            <mx:Label text="{b3.width}"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>
The executing SWF file for the previous example is shown below:

For more information and examples showing sizing of containers and children, see Flex component sizing techniques. For detailed information on percentage-based sizing, see Using percentage-based sizing.

Flex component sizing techniques

You can use default sizing, explicit sizing, and percentage-based sizing techniques to control the size of components. For information on using constraint-based layout for component sizing, see Using constraints to control component layout.

Using default sizing

If you do not otherwise specify sizes, the component's measure() method calculates a size based on the default sizing characteristics of the particular component and the default or explicit sizes of the component's child controls.

As a general rule, you should determine whether a component's default size (as listed for the component in the Adobe Flex Language Reference) is appropriate for your application. If it is, you do not have to specify an explicit or percentage-based size.

The following example shows how you can use default sizing for Button children of an HBox container. In this example, none of the children of the HBox container specify a width value:

<?xml version="1.0"?>
<!-- components\DefaultButtonSize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:HBox width="400" borderStyle="solid">
        <mx:Button label="Label 1"/>
        <mx:Button label="Label 2"/>
        <mx:Button label="Label 3"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

Flex, therefore, uses the default sizes of the buttons, which accommodate the button label and default padding, and draws this application as the following image shows:

Notice the empty space to the right of the third button, because the sum of the default sizes is less than the available space.

Specifying an explicit size

You use the width and height properties of a component to explicitly set its size, as follows:

<?xml version="1.0"?>
<!-- components\ExplicitTextSize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:HBox id="myHBox">
        <mx:TextInput id="myInput" 
            text="This TextInput control is 200 by 40 pixels."
            width="200" 
            height="40"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, Flex sets the component sizes to 200 by 40 pixels.

The following example shows setting the sizes of a container and its child:

<?xml version="1.0"?>
<!-- components\ExplicitHBoxSize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:HBox id="myHBox" 
        width="150" 
        height="150" 
        borderStyle="solid" paddingLeft="5" paddingTop="5" paddingRight="5"
    >
        <mx:TextInput id="myInput" 
            text="Enter the zip code" 
            width="200" 
            height="40"
        />
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

Because the specified TextInput control size is larger than that of its parent HBox container, Flex clips the TextInput control at the container boundary and displays a scroll bar (if you do not disable it) so that you can scroll the container to the clipped content. For more information on scroll bar sizing considerations, see Dealing with components that exceed their container size.

Using percentage-based sizing

Percentage-based sizing dynamically determines and maintains a component's size relative to its container; for example, you can specify that the component's width is 75% of the container. This sizing technique has several advantages over default or explicit fixed sizing:

• You only have to specify a size relative to the container; you don't have to determine exact measurements.
• The component size changes dynamically when the container size changes.
• The sizing mechanism automatically takes into account the remaining available space and fits components even if their requested size exceeds the space.

To specify a percentage value, use one of the following coding techniques:

1. In an MXML tag, set the height or width property to a percentage value; for example:

   <mx:TextArea id="ta1" width="70%" height="40%"/>
   
   

2. In an MXML tag or an ActionScript statement, set the percentHeight or percentWidth property to a numeric value; for example:

   ta1.percentWidth=70;
   
   

The exact techniques Flex uses to determine the dimensions of a component that uses percentage-based sizing depend on the type of container. For example, a Tile container has cells that are all the largest default or explicit dimensions of the largest child. Child control percentage values specify a percentage of the tile cell size, not of the Tile control size. The percentage sizes of the Box, HBox, and VBox containers, on the other hand, are relative to the container size.

Sizing percentage-based children of a linear container with automatic positioning

When Flex sizes children of a container that uses automatic positioning to lay out children in a single direction, such as a HBox or VBox container, Flex does the following:

1. Determines the size of the viewable area of the parent container, and uses the corresponding dimensions as the container dimensions for sizing calculations. The viewable area is the part of the component that is being displayed and can contain child controls, text, images, or other contents. For more information on calculating the size of containers, see Determining component size.
2. Determines the desired sizes of children with percentage-based sizes by multiplying the decimal value by the size of the viewable area of the container, minus any padding and inter-child gaps.
3. Reserves space for all children with explicit or default sizes.
4. If available space (parent container size minus all reserved space, including borders, padding, and gaps) cannot accommodate the percentage requests, divides the available space in proportion to the specified percentages.
5. If a minimum or maximum height or width specification conflicts with a calculated value, uses the minimum or maximum value, and recalculates all other percentage-based components based on the reduced available space.
6. Rounds the size down to the next integer.

The following examples show how the requested percentage can differ from the size when the component is laid out:

• Suppose that 50% of a HBox parent is available after reserving space for all explicit-sized and default-sized components, and for all gaps and padding. If one component requests 20% of the parent, and another component requests 60%, the first component is sized to 12.5% ((20 / 20+ 60) * 50%) of the parent container and the second component is sized to 37.5% of the parent container.
• If any component, for example, a Tile container, requests 100% of its parent Application container's space, it occupies all of the container except for the Application's 24-pixel-wide top, bottom, left, and right padding, unless you explicitly change the padding settings of the Application container.

Sizing percentage-based children of a container with absolute positioning

When Flex sizes children of a container that uses absolute positioning, it does the following:

1. Determines the viewable area of the parent container, and uses the corresponding dimensions as the container dimensions for sizing calculations. For more information on calculating the size of containers, see Determining component size.
2. Determines the sizes of children with percentage-based sizes by multiplying the decimal value by the container dimension minus the position of the control in the dimension's direction. For example, if you specify x="10" and width="100%" for a child, the child size extends only to the edge of the viewable area, not beyond.

   Because controls can overlay other controls or padding, the sizing calculations do not consider padding or any other children when determining the size of a child.

3. If a minimum or maximum height or width specification conflicts with a calculated value, uses the minimum or maximum value.
4. Rounds the size down to the next integer.

The following code shows the percentage-based sizing behavior with absolute positioning:

<?xml version="1.0"?>
<!-- components\PercentSizeAbsPosit.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundGradientColors="[#FFFFFF, #FFFFFF]" 
    verticalGap="25">

    <mx:Canvas 
        width="200" height="75" 
        borderStyle="solid">

        <mx:HBox 
            x="20" y="10" 
            width="100%" height="25"
            backgroundColor="#666666"/>
    </mx:Canvas>

    <mx:Canvas 
        width="200" height="75" 
        borderStyle="solid">

        <mx:HBox 
            left="20" top="10" 
            width="100%" height="25"
            backgroundColor="#666666"/>
    </mx:Canvas>
</mx:Application>
The executing SWF file for the previous example is shown below:

Flex draws the following application:

Examples: Using percentage-based children of an HBox container

The following example specifies percentage-based sizes for the first two of three buttons in an HBox container:

<?xml version="1.0"?>
<!-- components\PercentHBoxChildren.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:HBox width="400">
        <mx:Button label="Label 1" width="25%"/>
        <mx:Button label="Label 2" width="40%"/>
        <mx:Button label="Label 3"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, the default width of the third button is 66 pixels. The HBox container has no padding by default, but it does put a 8-pixel horizontal gap between each component. Because this application has three components, these gaps use 16 pixels, so the available space is 384. The first button requests 25% of the available space, or 96 pixels. The second button requests 40% of 384 pixels, rounded down to 153 pixels. There is still unused space to the right of the third button.

Flex draws the following application:

Now change the percentage values requested to 50% and 40%, respectively:

<?xml version="1.0"?>
<!-- components\PercentHBoxChildren5040.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:HBox width="400">
        <mx:Button label="Label 1" 
            width="50%"/>
        <mx:Button label="Label 2" 
            width="40%"/>
        <mx:Button label="Label 3"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, the first button requests 50% of the available HBox space, or 192 pixels. The second button still requests 40%, or 153 pixels, for a total of 345 pixels. However, the HBox only has 318 pixels free after reserving 66 pixels for the default-width button and 16 pixels for the gaps between components. Flex divides the available space proportionally between the two buttons, giving .5/(.5 + .4) * 318 = 176 pixels, to the first button and .4/(.5 + .4) * 318 = 141 pixels, to the second button. (All calculated values are rounded down to the nearest pixel.)

Flex draws the following application:

Using minimum or maximum dimensions

You can also use the minWidth, minHeight, maxWidth, and maxHeight properties with a percentage-based component to constrain its size. Consider the following example:

<?xml version="1.0"?>
<!-- components\PercentHBoxChildrenMin.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:HBox width="400">
        <mx:Button label="Label 1" 
            width="50%"/>
        <mx:Button label="Label 2" 
            width="40%" 
            minWidth="150"/>
        <mx:Button label="Label 3"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

To determine the widths of the percentage-based button sizes, Flex first determines the sizes as described in the second example in Examples: Using percentage-based children of an HBox container, which results in requested values of 176 for the first button and 141 for the second button. However, the minimum width of the second button is 150, so Flex sets its size to 150 pixels, and reduces the size of the first button to occupy the remaining available space, which results in a width of 168 pixels.

Flex draws the following application:

Sizing containers and components toolbox

You can control sizing, including setting the Application container size, handling components that exceed the container size, and using padding and custom gaps.

Setting the Application container size

When you size an application, you often start by setting the size of the Application container. The Application container determines the boundaries of your application in the Adobe® Flash® Player or Adobe® AIR™.

If you are using Adobe® Flex® Builder™, or are compiling your MXML application on the server, an HTML wrapper page is generated automatically. The width and height properties specified in the <mx:Application> tag are used to set the width and height of the <object> and <embed> tags in the HTML wrapper page. Those numbers determine the portion of the HTML page that is allocated to the Adobe Flash plug-in.

If you are not autogenerating the HTML wrapper, set the <mx:Application> tag's width and height properties to 100%. That way, the Flex application scales to fit the space that is allocated to the Flash plug-in.

You set the Application container size by using the <mx:Application> tag, as the following example shows:

<?xml version="1.0"?>
<!-- components\AppExplicit.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    height="100" 
    width="150"
>
    
        <!-- Application children go here. -->
</mx:Application>

In this example, you set the Application container size to 100 by 150 pixels. Anything in the application larger than this window is clipped at the window boundaries. Therefore, if you define a 200 pixel by 200 pixel DataGrid control, it is clipped, and the Application container displays scroll bars. (You can disable, or always display, scroll bars by setting the container's horizontalScrollPolicy and verticalScrollPolicy properties.)

For more information on sizing the Application container, see Application Container.

Dealing with components that exceed their container size

If the sum of the actual sizes of a container's children, plus the gaps and padding, exceed the dimensions of the container, by default, the container's contents are clipped at the container boundaries, and Flex displays scroll bars on the container so you can scroll to the remaining content. If you set the horizontalScrollPolicy and verticalScrollPolicy properties to ScrollPolicy.OFF, the scroll bars do not appear, but users do not have access to the clipped contents. If you set the clipContent property to false, container content can extend beyond the container boundary.

Using Scroll bars

If Flex cannot fit all of the components into the container, it uses scroll bars, unless you disable them by setting the horizontalScrollPolicy or verticalScrollPolicy property to ScrollPolicy.OFF or by setting clipContent to false. Consider the following example:

<?xml version="1.0"?>
<!-- components\ScrollHBox.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:HBox width="400">
        <mx:Button label="Label 1" 
            width="50%" 
            minWidth="200"/>
        <mx:Button label="Label 2" 
            width="40%" 
            minWidth="150"/>
        <mx:Button label="Label 3"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, the default width of the fixed-size button is 66 pixels, so there are 324 pixels of space available for the percentage-based buttons after accounting for the gap between components. The minimum widths of the first and second buttons are greater than the percentage-based values, so Flex assigns those buttons the set widths of 200 and 150 pixels, even though the HBox container only has 324 pixels free. The HBox container uses scroll bars to provide access to its contents because they now consume more space than the container itself.

Notice that the addition of the scroll bar doesn't increase the height of the container from its initial value. Flex considers scroll bars in its sizing calculations only if you explicitly set the scroll policy to ScrollPolicy.ON. So, if you use an auto scroll policy (the default), the scroll bar overlaps the buttons. To prevent this behavior, you can set the height property for the HBox container or allow the HBox container to resize by setting a percentage-based width. Remember that changing the height of the HBox container causes other components in your application to move and resize according to their own sizing rules. The following example adds an explicit height and permits you to see the buttons and the scroll bar:

<?xml version="1.0"?>
<!-- components\ScrollHBoxExplicitHeight.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:HBox width="400" height="42">
        <mx:Button label="Label 1" 
            width="50%" 
            minWidth="200"/>
        <mx:Button label="Label 2" 
            width="40%" 
            minWidth="150"/>
        <mx:Button label="Label 3"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

Flex draws the following application:

Alternatively, you can set the HBox control's horizontalScrollPolicy property to ScrollPolicy.ON. This reserves space for the scroll bar during the initial layout pass, so it fits without overlapping the buttons or setting an explicit height. This also correctly handles the situation where the scroll bars change their size when you change skinning or styles. This technique places an empty scroll bar area on the container if it does not need scrolling, however.

Using the clipContent property

If you set the clipContent property for the parent container to false, the content can extend beyond the container's boundaries and no scroll bars appear, as the following example shows:

<?xml version="1.0"?>
<!-- components\ClipHBox.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="600"
    height="400" 
    backgroundGradientColors="[#FFFFFF, #FFFFFF]">
    
    <mx:HBox id="myHBox" 
        width="150" 
        height="150" 
        borderStyle="solid" 
        backgroundColor="#996666" 
        clipContent="false">

        <mx:TextInput id="myInput" 
            width="200" height="40"
            backgroundColor="#99FF99"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

The following image shows the application, with the TextInput control extending past the right edge of the HBox control:

To ensure that components fit in the container, reduce the sizes of the child components. You can do this by setting explicit sizes that fit in the container, or by specifying percentage-based sizes. If you set percentage-based sizes, Flex shrinks the children to fit the space, or their minimum sizes, whichever is larger. By default, Flex sets the minimum height and width of most components to 0. You can set these components' minimum properties to nonzero values to ensure that they remain readable.

Using padding and custom gaps

There may be situations where you want your containers to have padding around the edges. (Previous Flex releases used the term margins; Flex 2 uses the term padding for consistency with cascading style sheet conventions.) Some containers, such as the Application container, have padding by default; others, such as the HBox container, have padding values of 0 by default. Also, some containers have gaps between children, which you might want to change from the default values. If your application has nonzero padding and gaps, Flex reserves the necessary pixels before it sizes any percentage-based components. Consider the following example:

<?xml version="1.0"?>
<!-- components\PadHBox.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:HBox 
        width="400" 
        borderStyle="solid" 
        paddingLeft="5" 
        paddingRight="5" 
        horizontalGap="5">
        
        <mx:Button label="Label 1" 
            width="50%"/>
        <mx:Button label="Label 2" 
            width="40%" 
            minWidth="150"/>
        <mx:Button label="Label 3"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

The default width of the fixed-size button is 66 pixels. All horizontal padding and gaps in the HBox control are 5 pixels wide, so the Flex application reserves 5 pixels for the left padding, 5 pixels for the right padding, and 10 pixels total for the two gaps between components, which leaves 314 pixels free for the two percentage-based components. Flex reserves 66 pixels for the default-sized (third) button; the second button requires its minimum size, 150 pixels; and the padding and gap take 20 pixels; this leaves 164 pixels available for the first button. The first button requests 200 pixels; therefore, it uses all available pixels and is 164 pixels wide.

Flex draws the following application: