So in Flex 4, scrolling has moved out of the individual visual containers and now is a container itself that wraps around the containers that need to be scrolled. This is a good thing, but does have some issues that developers, like me, need to wrap their heads around.

Right now, I am just going to talk about the sizing of the children inside the s:Scroller component. It’s something that I have run into a few times, and writing it out here will cement things in my head and hopefully be helpful to you, the reader.

When sizing children inside a scroller, make sure you aren’t using percent based sizing. Why? Because then the child will attempt to size itself to the size of the scroller. It seems obvious, but it’s one of those things that you don’t think about in the middle of coding since it isn’t something that you would think about in Flex 3.

When you use percentage based layout for the children, you end up getting children with their display elements cut off. The scroller thinks that the child is sized correctly based off of it’s percentage, and not it’s actual size. The way around this is to use constraint based layout. If you want a width=”100%” layout, then simply switching to left=0 right=0 will fix your problems. Also, if you don’t need to be fussy with your layout, then let the component size itself, and scroller will handle that properly as well.

In conclusion, avoid percentage based layouts when laying out inside a scroller component.

[GARD]