title: Div with scrollbar inside div with position:fixed
body: <p>I have a div with position:fixed that is my container div for some menus. I've set it to top:0px, bottom:0px to always fill the viewport. Inside that div I want to have 2 other divs, the lower one of which contains lots of lines and has overflow:auto. I would expect that it would be contained within the container div, but if there are too many lines it simply expands outside the fixed div. Below is my code and a screenshot to clarify:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;MyPlan&lt;/title&gt;
      &lt;meta name="X-UA-COMPATIBLE" value="IE=8" /&gt;
      &lt;style type="text/css"&gt;
          #outerfixed { position:fixed;  width:200px;  background-color:blue; padding:5px; top:0px; bottom:30px;}
          #innerstatic1 { width:100%; background-color:yellow; height:100px;}
          #innerstatic2 { overflow:auto; background-color:red; width:100%;}
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="outerfixed"&gt;
          &lt;h3&gt;OUTERFIXED&lt;/h3&gt;
          &lt;div id="innerstatic1"&gt;
              &lt;h3&gt;INNERSTATIC1&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div id="innerstatic2"&gt;
              &lt;h3&gt;INNERSTATIC2&lt;/h3&gt;
              line&lt;br /&gt;
                          ...lots of lines
              line&lt;br /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/VFhUP.png" alt="alt text"></p>
  
  <p>Is there any way for me to do this? Again, I want #innerstatic2 to be properly contained within #outerfixed and get scrollbars if it gets bigger than the space it has inside #outerfixed.</p>
  
  <p>I know there are some possibilites to hack around this by also fixing #innerstatic2, but I would really like it to be within the flow inside #outerfixed if possible, so that if I move #outerfixed somewhere, the inner element would come with it.</p>
  
  <p>EDIT: I know I can set overflow:auto on the #outerfixed and get a scrollbar on the whole thing, but I specifically want a scrollbar just on #innerstatic2, it is a grid and I want to scroll just the grid.</p>
  
  <p>Anyone? Possible?</p>