title: div with 100% height and overflow:auto
body: <p>I'm trying to make a page where I have 3 divs next to each other. The left and right div both have limited content, the center div will in many cases have more content than fits on the page. My goal is to give the center div a vertical scrollbar when needed. Should the left or right div actually ever have too much content, then the complete page should be scrollable.</p>
  
  <p>this is how I want it to look:</p>
  
  <p><img src="https://i.stack.imgur.com/m24RJ.png" alt="enter image description here"></p>
  
  <pre><code>&lt;div id="everything"&gt;
      &lt;div id="centeredDiv"&gt;
          &lt;div id="left"&gt;text&lt;/div&gt;
          &lt;div id="main"&gt;plenty of content&lt;/div&gt;
          &lt;div id="right"&gt;text&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is the css:</p>
  
  <pre><code>div {
      padding: 0px;
      margin: 0px;
      border: 0px;
      height: 100%;
  }
  
  div#everything {
    width: 100%;
    text-align: center;
    left: 0px;
    top: 0px;
  }
  
  div#centeredDiv {
    width: 200px;
    display: inline-block;
    position: relative;
  }
  
  div#left, div#right {
      width:100px;
      background-color: yellow;
      position: absolute;
      top: 0px;
  }
  
  div#left {
      left:-100px;
  }
  
  div#right {
      left:200px;
  }
  
  div#main {
      width:200px;
      background-color: orange;
      overflow-y : auto;
  }
  </code></pre>
  
  <p>I tried to make a simplified jsfiddle example: <a href="http://jsfiddle.net/CosmicAcidGuru/km8Xk/3/" rel="nofollow noreferrer">enter link description here</a></p>
  
  <p>clicking the button will increase content in the center div. When the page is full, I'd like to have scrollbars for the center div, but they don't show up. Can anyone help me accomplish that?</p>
  
  <p>I also wouldn't mind the 3 divs actually taking up the entire space up to the bottom of the page even when they don't have much content. Is there a way to make height:100% greedy?
  Should I arrange my 3 divs differently?</p>