Flex Layout: can width be 100% of the *visible* area of a larger container

I've got the following situation, where I have an outer Vbox that is set at a fixed width, and then inside it there is a header made from an HBox and a content area (Canvas) that is much wider than the开发者_StackOverflow enclosing VBox (and therefore requires scrollbars on the outer VBox to see it all).

I would like to set the width of the header to fill the entire width of the outer container, but only the visible part, and to remain fixed so that when I scroll to view the content, the header doesn't move.

Can anyone tell me how I can acomplish this please

    ______________________________
   |  _________________________   |       
   | |_________________________|  |
   |                     |     
   |  ____________________________|_ _ _ _ _ 
   | |                            |         |
   | |                            |         |
   | |                            |         |
   | |                            |         |
   |  ---------------------------------------
   |                              |
   |______________________________|
   |<|__________________________|>|

Create a VBox with 1) a header at the top, and 2) a VBox underneath the header with your canvas inside that. The other answer will also work. And those graphics help a lot, good man.

Use Group as a wrapper:

<Child1/>

<s:Group width="100%">
    <Child2 left="0" right="0'/>
</s:Group>

<Child3/>

If you need the header fixed above VBox, just not add it in. Place it above (create wrapper Canvas for VBox and header). Instead of header place UIComponent with corresponding height to take place of header.

BTW, +1 for patience with pseudographics :)