Having the content of a s:Scroller viewport at 100% height

Question

Is there a way to get the content of a component inside a scroller to be at 100% height.

here is a simple example:

<s:Scroller width="100%" height="100%">
 <s:viewport>
  <s:Group height="100%">
   <s:Rect width="10" height="500">
    <s:fill>
     <s:SolidColor color="0xFF0000"/>
    </s:fill>
    </s:Rect>
   <s:Rect width="10" x="10" height="100%">
    <s:fill>
     <s:SolidColor color="0x00FF00"/>
    </s:fill>
   </s:Rect>
   <s:Rect width="10" x="20" height="100">
    <s:fill>
     <s:SolidColor color="0x0000FF"/>
    </s:fill>
   </s:Rect>
  </s:Group>
 </s:viewport>
</s:Scroller>

If you run this code and scroll down a bit, this is what you get:

As you can see, the green bar (set at 100% height) is just using the height of the viewport, not that of it's parent group, that is stretched by the red one to be 500px high.

Is there a way to fix that?

Answer 1

Here's a workaround: Put the group inside another group, and then it works as expected.