title: Fixed height scrollable div inside of a bootstrap 3 column
body: <p>I have seen similar questions, but nothing exactly like I'm trying. Most of the examples make the entire col-md-2 scroll, I need content within that to scroll.</p>
  
  <p>Inside a fluid container, I have a left navigation type column, and a right content column.</p>
  
  <p>Inside the left column I want a div at the top class="top", and a div at the bottom class="bottom". And in the middle I have a list. Say bottom and top are 100px. I want the list to take up all of the space between the two, and if the list content is larger than this area, I want it to scroll. If the list content is smaller than the space between the two, I want it to take up all of that space (not collapse).</p>
  
  <p>Here is a psuedo example:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
           &lt;div class="col-md-2"&gt;
  
              &lt;div class="top"&gt;
                  . . .
              &lt;/div&gt;
  
              &lt;div class="scroll-area"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;one&lt;/li&gt;
                      . . .
                      &lt;li&gt;one-thousand&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;div class="bottom"&gt;
                  . . .
              &lt;/div&gt;
  
           &lt;/div&gt; 
           &lt;div class="col-md-10 content"&gt;
           &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;style&gt;
     .top, .bottom { height: 100px; }
    &lt;/style&gt;
  </code></pre>
  
  <p>I was able to do this before without bootstrap by giving "scroll-area" absolute positioning.  I can make the scroll-area work with fixed positioning, but the containing "col-md-2 is collapsed, so "bottom" sits up top.</p>
  
  <p><a href="https://i.stack.imgur.com/DvdUZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DvdUZ.png" alt="enter image description here"></a></p>
  
  <p>How can I make this work?</p>