Flex - percentage height

Question

How can I limit the size of a child container with percentage width/height of 100%?

Example:

<mx:HBox id="container" width="100%" height="100%">
    <mx:HBox id="scrollContainer" width="100%" height="100%">
        <!-- keep this content limited to the size of "container" -->
        <!-- I also want to use the scollers from "scrollContainer" -->
    </mx:HBox>
</mx:HBox>

Right now the content inside "scrollContainer" will overflow once its bigger than "container"

EDIT

Apparently I can get the desired behavior if I change HBox to Canvas but I would still like to know how to accomplish this with a HBox and why it differs from Canvas.

Answer 1

maxHeight, maxWidth attributes

And to answer your other question.
Canvas - children absolute positioning for objects meaning X and Y are set
HBox, VBox - children positioning are based on the parent(HBox, VBox ) With HBox, VBox if you set x or y on a child you will notice nothing changes, the parent overrides it.

Answer 2

You might be able to do it if you set the verticalScrollPolicy and horizontalScrollPolicy on the outer HBox to "off". This is the kind of thing that is better done with a single top level HBox - HBoxes exist to give you a horizontal layout for your controls, so nesting one inside the other at 100% gives you two levels of nesting without any functional difference.

Your solution with the Canvas sounds like a better layout than what you were asking for in the first place, as the Canvas is a more lightweight control, though it still isn't doing anything for you if you don't have another sub control in there.

Answer 3

I think you should be able to do this by setting the width like this:

<mx:HBox id="container" width="100%" height="100%">
    <mx:HBox id="scrollContainer" width="{container.width}" height="{container.height}">
        <!-- keep this content limited to the size of "container" -->
        <!-- I also want to use the scollers from "scrollContainer" -->
    </mx:HBox>
</mx:HBox>