flex

by Park Mino

HTML

<div class="wrap">
  <div class="box">
    <div class="top">
       <select>
          <option>aa</option>
        </select>
    </div>
    <div class="cont">
      <div class="inner">
        cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>
      cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>
      cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>
      cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="top">
       <select>
          <option>bb</option>
        </select>
    </div>
    <div class="cont">
      <div class="inner">
        cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>
      cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>
      cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>
      cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>cont<br>
      </div>      
    </div>
  </div>
</div>

CSS

*{margin:0;padding:0;}
html,body{height:100%;}
.wrap{height:100%;background-color:#345;display:flex;}
.box{height:100%;width:50%;display:flex;flex-direction: column;}
.top{position:relative;z-index:1;width:100%;height:50px;background-color:red;}
select{width:100%;}
.cont{height:calc(100% - 50px);background-color:#ccc;overflow-y:scroll;}
.cont .inner{}