[flexcoders] Canvas and Box in fluid layout

[Richard Rodseth]

Here's something I wish I'd known a long time ago, which may help someone
else. Or perhaps I forgot. Consider the following:

        <mx:HBox width="100%" height="100%">
            <mx:Canvas width="33%" height="100%"
horizontalScrollPolicy="auto">
                <mx:Button label="Foo" height="100%" width="500"/>
            </mx:Canvas>
            <mx:Canvas width="33%" height="100%"
horizontalScrollPolicy="off">
                <mx:Button label="Foo" height="100%" width="600" />
            </mx:Canvas>
            <mx:Canvas width="33%" height="100%">
                <mx:Button label="Foo" height="100%" width="100%"/>

            </mx:Canvas>
        </mx:HBox>

This results in three evenly sized columns. If the Canvases are replaced
with VBoxes, you get a different result. Doesn't that seem
counter-intuitive? Canvas and VBox both have sizing rules based on their
children, but it appears that for a Canvas the parent-derived bounds takes
precedence, triggering scrolling. For Boxes, that is not the case, even
though Boxes will also scroll when needed.