title: Adobe Flex/AIR: Scrolling a sub-component, not the whole window
body: <p>I'm developing an application with Adobe Flex and AIR, and I've been banging my head against the wall trying to figure out how to solve a scrolling issue.</p>
  
  <p>The basic structure of my main application window (simplified greatly) is this:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
     paddingTop="0" paddingRight="0" paddingBottom="0" paddingLeft="0"
     width="800" height="600" layout="vertical" verticalAlign="top" 
  &gt;
     &lt;mx:VBox id="MainContainer" width="100%" height="100%"&gt;
        &lt;mx:Panel id="Toolbars" width="100%" height="25" /&gt;
        &lt;mx:HDividedBox width="100%" height="100%" &gt;
           &lt;mx:Panel id="Navigation" minWidth="200" height="100%" /&gt;
           &lt;mx:VBox id="MainContent" width="100%"&gt;
              &lt;mx:Panel width="100%" height="200" /&gt;
              &lt;mx:Panel width="100%" height="200" /&gt;
              &lt;mx:Panel width="100%" height="200" /&gt;
              &lt;mx:Panel width="100%" height="200" /&gt;
              &lt;mx:Panel width="100%" height="200" /&gt;
           &lt;/mx:VBox&gt;
           &lt;mx:Panel id="HelpContent" minWidth="200" height="100%" /&gt;
        &lt;/mx:HDividedBox&gt;
        &lt;mx:Panel id="FooterContent" width="100%" height="25" /&gt;
     &lt;/mx:VBox&gt;
  &lt;/mx:WindowedApplication&gt;
  </code></pre>
  
  <p>The trouble is that the "MainContent" box might contain a huge list of subcomponents, and the presence of that long list causes a vertical scrollbar to appear at the highest level of the GUI, surrounding the "MainContainer" vbox.</p>
  
  <p>It looks really silly, having scrollbars around the entire application window.</p>
  
  <p>What I'm looking for instead is a solution where the scrollbar is only applied to the "MainContent" vbox (as well as the Navigation and HelpContent panels, if their content stretches past the window bounds).</p>
  
  <p>I found a <a href="https://stackoverflow.com/questions/245292/best-way-to-size-containers-in-flex-to-obey-only-parent-containers-explicit-dim">related question</a> on StackOverflow, where the problem's solution was to use "autoLayout" and "verticalScrollPolicy" attributes on parent containers.</p>
  
  <p>So I tried adding autoLayout="false" and verticalScrollPolicy="off" attributes to all of the parent containers, as well as verticalScrollPolicy="on" to the "MainContent" vbox. But the end-result of that experiment was that the content was simply clipped from the main container (and a useless scrollbar with no thumb was added to the MainContent vbox).</p>
  
  <p>Anyone know how to solve this?</p>