Flex - Scroll/Scrollbar Issues

I learned an important lesson in Flex layout this morning.

Synopsis:

Set minHeight=0 on an inner container to get it to display scrollbars itself instead of passing on the buck to outer containers.

Here is my post on the adobe forums about this.

Detail:

The Problem: I had a bunch of content inside of 'Box B', and Box B was itself inside of 'Box A'. I wanted scrollbars to show up on Box B, but they seemed insist on showing up on Box A.

The Solution: Box B was set to height='100%', which I thought would restrict it to being 100% of the available space of its parent container. However, it turns out that 'minimum' and 'maximum' values trump any other size settings. And by default, a Box calculates its minimum height. To calculate the minimum height, it sums up its padding, all of its childrens' heights and the gaps between its children. Thus, I was telling Box B that it should be 100% of the available height of its parent container (300px), but Box B said -- "Hold on a minute, my minimum height with all these children adds up to 500px. I'm not going any smaller than 500px no matter what you tell me my percentage height should be." The solution, then, was to tell Box B, "Forget about calculating your minimum height, I'm telling you what your minimum height is, and it is 0px". After that point, Box B happily obeyed the 100% height specification and produced scrollbars when it had more content than would fit in that space.

The Code:

Here's the non-working code:

<?xml version="1.0"?> 
<mx:Application xmlns:mx='http://www.adobe.com/2006/mxml'
  styleName='plain'
  height='100%' width='100%'
  paddingTop='10' paddingBottom='10' paddingLeft='10' paddingRight='10'
  backgroundColor='black'>
  <mx:Box width='100%' height='100%'
    paddingTop='10' paddingBottom='10' paddingLeft='10' paddingRight='10'
    backgroundColor='yellow'>
    <mx:TextArea height='500'
    text="Try resizing the window.  You'll see that the scrollbars show up on the Application instead of the yellow box." />
  </mx:Box>
</mx:Application>

Here's the working code:

<?xml version="1.0"?> 
<mx:Application xmlns:mx='http://www.adobe.com/2006/mxml'
  styleName='plain'
  height='100%' width='100%'
  paddingTop='10' paddingBottom='10' paddingLeft='10' paddingRight='10'
  backgroundColor='black'>
  <mx:Box width='100%' height='100%'
    minHeight='0'
    paddingTop='10' paddingBottom='10' paddingLeft='10' paddingRight='10'
    backgroundColor='yellow'>
    <mx:TextArea height='500'
    text="Try resizing the window.  You'll see that the scrollbars show up on the yellow box now." />
  </mx:Box>
</mx:Application>