Sizing Blues - Using Canvas to keep it under Control

I find a spend a great deal of time trying to get all the components of my application to play nice with one another. But every now and then, I'll get that nasty vertical or horizontal scroll bar on my application, when I'm quite sure that I've been using percentages for widths and heights throughout.

So then the search begins, from the top layer, the application, I start to give different background colors to different containers, and each time I color a container I assign it a fixed size. Step by step, layer by layer, I will eventually find the component that isn't playing along. Most of the time it's either some form controls where the sum of their sizes is causing the percentage amounts to be ignored, or it's an image that's too big.

One of the more common pitfalls is adding a form container to an HBox or VBox. In this case, if the controls are too wide or too tall, the form will simply push out the rest of the containers in the app. Of course I could constrain the size of the form or the container of the form, however then I risk losing the cool auto-grow features of flex. Yet if the screen size is too small, I'd like the scrollbars to be restricted to the container closest to the source of the error.

What seems to work best, I find, is wrapping controls that risk causing this distortion inside a Canvas control. So, in other words, instead of:
<mx:HBox width="100%"><mx:Form width="100%'>...
I would suggest using:
<mx:HBox width="100%"><mx:Canvas width="100%"><mx:Form width="100%">...
The Canvas will popup scroll bars and contain the distortion, but will also autogrow with the app.

You can find an example of a little app I wrote that demonstrates this concept here. Right click on the app to get the source code.