Scrolling issue in Flex 3

Question

In Flex 3 I have component that displays html taken from a db just by using the htmlText property of a TextArea. The component contains multiple TextAreas for different areas of content (ie header, left column, right column). This is contained inside a canvas element which has a fixed height. As the length of the content varies, my component resizes to fit the size of the new html. If the height goes larger than the size of the canvas container then a scrollbar appears on the canvas container. All this is working fine.

My problem is that when you scroll this content it doesn't redraw properly. Things start to overlap and the sections of the html appear multiple times. Yet if you click on one of these TextAreas, that particular text area then jumps into the right place and looks correct again.

Is there something I need to call when scrolling to make the scrolling work correctly? Alternatively is there a way of spoofing this click to make the content jump back into place when the scroll is completed?

Or anyone have any other ideas as to what may cause this kind of behaviour?

Here is the code for my component:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="740" xmlns:Admin="Components.Admin.*">

    <mx:Script>
        <![CDATA[

            public function setData(id:String, data:String)
            {
                id = id.toLowerCase();

                var target_cc:LibraryContentContainer = this.GetEditableAreaByID(id, this); 

                target_cc.Value = data;
            }

            /**
             * Returns the editable area with the specified ID
             * 
             * This is a duplicate of LibraryPageEditor::GetEditableAreaByID - need to sort this out
             */ 
            public function GetEditableAreaByID(id:String, container:DisplayObjectContainer = null):LibraryContentContainer
            {
                var cont:LibraryContentContainer;
                var testcont:LibraryContentContainer;

                if (container)
                {
                    if (container is LibraryContentContainer)
                    {
                        testcont = container as LibraryContentContainer;

                        if (testcont.id == id) cont = testcont;
                    }
                    else
                    {
                        for (var i:uint=0; i < container.numChildren; i++) 
                        {
                            testcont = GetEditableAreaByID(id, container.getChildAt(i) as DisplayObjectContainer);

                            if (testcont)
                            {
                                if (testcont.id == id)
                                {
                                    cont = testcont;
                                    break;
                                }
                            }
                        }
                    }
                }

                return cont;

            }

        ]]>
    </mx:Script>


    <mx:VBox>

        <Admin:LibraryContentContainer name="row1" id="row1" ContentType="text" width="720">

        </Admin:LibraryContentContainer>

        <mx:HBox>

            <Admin:LibraryContentContainer name="col1" id="col1" ContentType="text" width="350">

            </Admin:LibraryContentContainer>

            <Admin:LibraryContentContainer name="col2" id="col2" ContentType="text" width="350">

            </Admin:LibraryContentContainer>

        </mx:HBox>

    </mx:VBox>

</mx:Canvas>

And I am using the following to add it to the canvas container

            this.ContentContainer.removeAllChildren();

            var tmpl:Templates2cols = new Templates2cols();

            tmpl.id = "TemplateContainer";
            tmpl.name = "TemplateContainer";

            this.ContentContainer.addChild(tmpl);

            this.ContentContainer.validateNow();

            this.LoadContentData();

Finally, the code that I am using to put the data into the component is

public function LoadContentData():void
{
    var cxml:XML = this.__contentXML;

    var tmpl_do:DisplayObject = this.ContentContainer.getChildByName("TemplateContainer");

    var tmpl:Templates2cols = tmpl_do as Templates2cols;

    for each (var xv:XML in cxml.value)
    {
        var targetitem:Object;
        var targetid:String = xv.@target;
        var ttl:String = xv.@title;

        var xvl:XMLList = xv.children();
        var xvls:String = xvl.toXMLString();

        tmpl.setData(targetid, xvls);

    }

}

Any ideas would be much appreciated. Thanks