How to enable scrolling with VerticalLayout in mobile flex?

Question

I use a VerticalLayout and there are many components inside, so the display does not show all of the items :

    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5" />
    </s:layout>
    <s:TextInput id="chp1" width="50%"/>
    <s:TextInput id="chp2" width="50%"/>
    <s:Button label="Enregistrer" click="enregistrer(event)" styleName="btn"/>
    <s:Button label="Lire" click="lire(event)" styleName="btn" />
    <s:TextArea id="area"/>
    <s:HGroup> 
        <s:Button label="Envoyer" click="send(event)" styleName="btn" />
        <s:Button label="Retour" click="navigator.popView()" styleName="btn" />
    </s:HGroup>
    <s:TextArea id="resultHTTP"/>
        ...

How to enable vertical scroll in this case ?

Answer 1

I can never seem to get it to work unless I use this magic recipe:

<!-- Use size rules to set the upper limit in the bounding box with clipAndEnableScrolling -->
<s:Group width="100%" height="100%" clipAndEnableScrolling="true">
    <!-- Pin the scroller to the absolute bounds -->
    <s:Scroller top="0" left="0" bottom="0" right="0">
        <!-- The direction (vertical/horizontal) you want to scroll should                                  
            not  have an explicit bounds-->
        <s:Group width="100%">
            <s:layout>
                <s:VerticalLayout horizontalAlign="center" paddingBottom="5" paddingLeft="5" paddingRight="5"
                                  paddingTop="5" verticalAlign="middle" />
            </s:layout>
            <!-- Scrollable content goes here -->
        </s:Group>
    </s:Scroller>
</s:Group>

The scroll bars will appear once the content gets to big for the visible area

Answer 2

You must use a Scroller and wrap the viewport you want to scroll in one.

Answer 3

Here is a basic demonstration of how to add vertical scroll:

<s:Scroller height="100" width="100" verticalScrollPolicy="auto">
            <s:Group height="100%" width="100%">
                <mx:VBox height="100%" width="100%">
                    <mx:Button label="abcd"/>
                    <mx:Button label="abcd"/>
                    <mx:Button label="abcd"/>
                    <mx:Button label="abcd"/>
                    <mx:Button label="abcd"/>
                    <mx:Button label="abcd"/>
                    <mx:Button label="abcd"/>
                    <mx:Button label="abcd"/>
                    <mx:Button label="abcd"/>
                </mx:VBox>
            </s:Group>
        </s:Scroller>