Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/09/programmatically-resizing-a-flex-hdividedbox-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <!-- Move the divider 20 pixels to the left for as long as the
             Button control is pressed (autoRepeat=true). -->
        <mx:Button label="x-=20"
                autoRepeat="true"
                buttonDown="hdivbox.moveDivider(0, -20);" />
        <!-- Move the divider 20 pixels to the right for as long as the
             Button control is pressed (autoRepeat=true). -->
        <mx:Button label="x+=20"
                autoRepeat="true"
                buttonDown="hdivbox.moveDivider(0, 20);" />

        <mx:Spacer width="50" />

        <!-- Move the divider to 100 pixels from the left. -->
        <mx:Button label="x=100"
                click="hdivbox.getDividerAt(0).x = 100;" />
        <!-- Move the divider to 420 pixels from the left. -->
        <mx:Button label="x=420"
                click="hdivbox.getDividerAt(0).x = 420;" />
    </mx:ApplicationControlBar>

    <mx:HDividedBox id="hdivbox" width="100%" height="100%">
        <mx:VBox backgroundColor="haloGreen" width="100%" height="100%">
            <!-- children -->
        </mx:VBox>
        <mx:VBox backgroundColor="haloBlue" width="100%" height="100%">
            <!-- children -->
        </mx:VBox>
    </mx:HDividedBox>

</mx:Application>

View source is enabled in the following example.

In the previous example, the moveDivider() method is used to move the divider relative to its current position. So, calling moveDivider(0, 20) moves the first (and only) divider 20 pixels to the right. To move the divider 20 pixels to the right, you’d pass a negative value for the second parameter, like so:

moveDivider(0, -20)

To set the divider to a specific point, you can use the getDividerAt() method and set the divider’s x property (for a horizontal divided box, if you were using a vertical divided box you would set the y property instead). So again in the previous example, you would use the following code to set the first divider to 100 pixels from the left edge:

hdivbox.getDividerAt(0).x = 100;

If you wanted to force the nested VBox containers to have a minimum or maximum width, simply set the minWidth and/or maxWidth properties, as seen in the following snippet:

<mx:VBox backgroundColor="haloGreen"
        width="100%"
        height="100%"
        minWidth="50"
        maxWidth="250">
    <!-- children -->
</mx:VBox>

Now when you resize the HDividedBox container’s divider, the green VBox container will be at least 50 pixels wide and at most 250 pixels wide.