title: Div scroll in Divs won't scroll
body: <p>Populating results into div2 but div scroll is not showing as I thought.
  Seems like div2 100% is going far bottom of browser but couldn't make it 100% with in given area.
  This div is staying on right side.
  How can I put my results into div2 with a scroll?</p>
  
  <p>JSfiddle: <a href="https://jsfiddle.net/nx02w9h5/1/" rel="nofollow">https://jsfiddle.net/nx02w9h5/1/</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="sideContainer"&gt;
    &lt;div id="midContainer"&gt;
      &lt;div id="menuBox"&gt;
        &lt;div id="div1"&gt;
          &lt;ul class="tabs-menu"&gt;
            &lt;li class="current"&gt;&lt;a href="#tab-1"&gt;TBD&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#tab-2"&gt;TBD&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#tab-3"&gt;TBD&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="tab"&gt;
            &lt;div id="tab-1" class="tab-content"&gt;
              &lt;form name="sOptForm" id="sOptForm"&gt;
                &lt;input type="radio" name="searchOp" class="sOption" value="opt1" checked&gt; opt1
                &lt;br&gt;
                &lt;input type="radio" name="searchOp" class="sOption" value="opt2"&gt; opt2
                &lt;br&gt;
                &lt;input type="radio" name="searchOp" class="sOption" value="opt2"&gt; opt3&lt;/form&gt;
              &lt;br /&gt;
              &lt;input type="text" id="stateName" value="Dorm"&gt;
              &lt;input id="execute" type="button" value="Search"&gt;
  
            &lt;/div&gt;
            &lt;div id="div2"&gt;
              sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;sadfgsadfadsfsad
              &lt;br&gt;
  
            &lt;/div&gt;
  
            &lt;div id="tab-2" class="tab-content"&gt;
              &lt;!--contents--&gt;
            &lt;/div&gt;
            &lt;div id="tab-3" class="tab-content"&gt;
              &lt;!--contents--&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>html,
  body,
  {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  
  #sideContainer {
    display: table;
    z-index: 888;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 300px;
    vertical-align: middle;
    height: 100%;
  }
  
  #midContainer {
    display: table-cell;
    vertical-align: middle;
    bottom: 0px;
    height: 100%;
  }
  
  #menuBox {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-color: red;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  #div1,
  #div2 {
    position: absolute;
  }
  
  #div1 {
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
  }
  
  #div2 {
    color: #500000;
    top: 160px;
    width: 98%;
    right: 0px;
    overflow: scroll;
  }
  
  #search_res {
    width: 97%;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
  }
  
  .tabs-menu {
    height: 20px;
    float: left;
    clear: both;
  }
  
  .tabs-menu li {
    height: 30px;
    line-height: 30px;
    float: left;
    margin-right: 10px;
    background-color: #ccc;
    border-top: 1px solid #500000;
    border-right: 1px solid #500000;
    border-left: 1px solid #500000;
    border-radius: 5px 5px 0px 0px;
  }
  
  .tabs-menu li.current {
    position: relative;
    border-bottom: 1px solid #F4AF00;
    background-color: #B7A66D;
    z-index: 5;
  }
  
  .tabs-menu li a {
    padding: 10px;
    color: #500000;
    text-decoration: none;
  }
  
  .tabs-menu .current a {
    color: #500000;
  }
  
  .tab {
    float: left;
    margin-bottom: 10px;
    width: 98%;
    height: 100%;
  }
  
  .tab-content {
    width: 98%;
    padding: 0px;
    display: none;
  }
  
  #tab-1 {
    display: block;
  }
  </code></pre>
  
  <p>thanks!</p>