Problems adding AS3 created objects to Flex Components

I have spent the better part of a day discovering that adding actionscript created UIComponents to the display list of a flex component will cause the component to not set the scrollbars properly.

Here is what I had:

1. An mx:Canvas object added to the stage using the tag
2. An AS3 class called ImageHolder that was extended from UIComponent
3. A loop to adds a series of 28 images into the Canvas, setting the x and y props so that they were spaced into rows of 4.

When I ran it, the objects would start to add properly but when it got to the bottom row of the canvas (where the rest of the images would have to be hidden inside the container) the images showed on above the canvas and then suddenly get hidden by the container -- as though they were on top of the canvas and not inside of it. In addition the scrollbar would not properly scroll to the last row of images -- essentially hiding the from view. I assume this is because the Canvas component was not recognizing that those last items were there and wouldn't resize again.

After trying a number of different approaches, I finally decided to create a custom component that was based on a canvas and add the images to it instead. Once I did this and added this Component to the Canvas it worked perfectly.

It probably says somewhere in the docs that you should use components as a building blocks instead of creating actionscript objects, but I just assumed that they would play nice together...