Move Vertical Scroll From Page To Inner Div

I have a page without vertical scroll on

Solution 1:

I think you are looking for a flex-box solution. It requires some love and care to get it to work on all modern browsers so take a look at caniuse.com for info about this.

It is worth pointing out that this does not work with old browser version at all and that a JavaScript substitute will be required if support is essential.

html,body{
  height:100%;
  margin:0;
}
#wrapper{
  height:100%;
  display:flex;
  flex-direction:column;
}
#header{
  height:50px;
  background-color:red;
}
#content{
  flex:1;  
  display: flex;
  min-height: 0; // FF FIX
  background-color:yellow;
}
.scrollable{
  width: 50%;
  overflow-y:auto;
  float:left;
  display:inline-block;
}
#footer{
  background-color:green;
}

<div id="wrapper">
  <div id="header">
    Header
  </div>
  <div id="content">
    <div class="scrollable">
      <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </div>
    <div class="scrollable">
      <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </div>
  </div>
  <div id="footer">
    Content
  </div>
</div>

Share