Flex DividedBox children are displayed outside

I am using a DividedBox in Flex which contains only a datagrid at first. When I click on an Item on the Datagrid, a second element with a width of 0% (Spark Group) is added to the divided box to display an image.

The thing is, when the second element is added to the DividedBox, the image is partially displayed outside the DividedBox, and I don't want to have this behavior.

Here is the interesting code :

<mx:DividedBox direction="horizontal" id="divider" borderColor="red" borderStyle="solid" borderVisible="true" right="10" left="10" top="10" bottom="10">
    <s:Group width="100%" height="100%">
        <!--datagrid-->
    </s:Group>
</mx:DividedBox>

And here is the piece of code that adds the second child of the dividedBox (simplified code) :

private var _pdf_preview:Group = new Group();
[Bindable]
[Embed(source="assets/image/llama.jpg")]
private var imgClass:Class;

protected function itemOnClickHandler(event:MouseEvent):void
{
    _pdf_preview = new Group();
    var img:Image = new Image();
    img.source = imgClass;
    _pdf_preview.addElement(img);
    _pdf_preview.percentWidth = 0;
    divider.addElement(_pdf_preview);
}

And here is a screen of the problem (Btw, don't notice my skills on Gimp :) ). As a new user I can't bind images to my post : screen showing my problem the red border show the limits of the dividedBox

Thank you. I hope there are not too much fault, english is not my native language. Sorry for any english mistakes.

PS : I couldn't add the "DividedBox" tags because it was not existing before, and I'm a "new user" so I can't create new tags.

Solution

You can use the clipContent property to cut off the image at the edge of the DividedBox:

<mx:DividedBox clipContent="true" />

When using Spark containers, clipAndEnableScrolling is the property you need to achieve the same goal.

I would also like to note that you usually don't require to dynamically add components through ActionScript. You can use 'states' instead. For example:

<s:states>
    <s:State name="normal" />
    <s:State name="image" />
</s:states>

<mx:DividedBox clipContent="true">
    <s:DataGrid />
    <s:Image includeIn="image" />
</mx:DividedBox>

Now all you need to do to show the Image, is set the currentState to image.