Divのスクロール・スクロールはスクロールしません

Question

div2に結果を取り込みますが、divスクロールが私の思うように表示されません。 div2のように見えますが、100％はブラウザの一番下にありますが、特定の領域では100％にすることはできませんでした。 この部門は右側にあります。 結果をスクロールでdiv2に配置するにはどうすればよいですか？

JSfiddle：https://jsfiddle.net/nx02w9h5/1/

HTML

<div id="sideContainer"> 
    <div id="midContainer"> 
    <div id="menuBox"> 
     <div id="div1"> 
     <ul class="tabs-menu"> 
      <li class="current"><a href="#tab-1">TBD</a></li> 
      <li><a href="#tab-2">TBD</a></li> 
      <li><a href="#tab-3">TBD</a></li> 
     </ul> 
     <div class="tab"> 
      <div id="tab-1" class="tab-content"> 
      <form name="sOptForm" id="sOptForm"> 
       <input type="radio" name="searchOp" class="sOption" value="opt1" checked> opt1 
       <br> 
       <input type="radio" name="searchOp" class="sOption" value="opt2"> opt2 
       <br> 
       <input type="radio" name="searchOp" class="sOption" value="opt2"> opt3</form> 
      <br /> 
      <input type="text" id="stateName" value="Dorm"> 
      <input id="execute" type="button" value="Search"> 

      </div> 
      <div id="div2"> 
      sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br> 

      </div> 

      <div id="tab-2" class="tab-content"> 
      <!--contents--> 
      </div> 
      <div id="tab-3" class="tab-content"> 
      <!--contents--> 
      </div> 
     </div> 

     </div> 
    </div> 
    </div> 
</div> 

CSS

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; 
} 

感謝！

Answer 1

ここ

Updated fiddle

#div2 { 
    color: #500000; 
    top: 160px; 
    width: 98%; 
    right: 0px; 
    bottom: 0; 
    overflow: scroll; 
} 

Answer 2

あなたのCSSルールにbottom: 0を追加しますが、作業のフィドルは

https://jsfiddle.net/sesn/nx02w9h5/3/

設定#div2{ max-height: 100px }

Answer 3

です

あなたは自分のdiv 1とDIV2高さと幅を計算します。ここではメソッドだけを示しています