title: Using CSS max-height on an outer div to force scroll on an inner-div
body: <p>I have an outer div with a variable height (and max-height) that's set with a specific pixel amount by JavaScript, containing two divs within. </p>
  
  <ol>
  <li>The 1st div is intended to hold a variable amount of content, e.g. a list of links. It has no height set.</li>
  <li>The 2nd div is intended to hold a fixed amount of content, and has a specific height set.</li>
  </ol>
  
  <p>Right now, the max-height isn't working. The 1st div keeps growing, even with overflow: auto; set, and pushes the 2nd div below it outside the bounds of the outer div. How can I make it so that when the 1st div gets too large for the outer div to contain both it and the fixed-height 2nd div, the 1st div will start to scroll?</p>
  
  <p>Example page: <a href="http://thevastdesign.com/scrollTest.html" rel="nofollow noreferrer">http://thevastdesign.com/scrollTest.html</a></p>
  
  <p>Thanks for any help. I'd appreciate a CSS solution the most, even if it requires some hacks. It only has to work in Firefox 3+, IE8, and IE7.</p>
  
  <p>Ideas?</p>