title: CSS overflow-y:scroll; missing something
body: <p>i have one problem with CSS <code>overflow-y:scroll;</code> </p>
  
  <p>I have created this <strong><a href="http://codepen.io/shadowman86/pen/pJeGeY" rel="nofollow">DEMO</a></strong> from codepen.io </p>
  
  <p>In this demo you can see there is a left sidebar. And inside have 11 <code>.layer</code> div . but if you scrolling down from the left sidebar then you can see only 9 layer other 2 layers staying inside. </p>
  
  <p>What is the problem in my CSS. What i need to do for fixed it ?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container {
    -webkit-animation: cardEnter 0.75s ease-in-out 0.5s;
    animation: cardEnter 0.75s ease-in-out 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: block;
    position: absolute;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    max-width: 980px;
    min-width: 300px;
    margin-top: 75px;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
    background-color: #ffffff;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    min-height: 140px;
  }
  .left{
    display: block;
    position: absolute;
    float: left;
    width: 30%;
    overflow: hidden;
    padding: 0px;
    bottom: 0;
    top: 0;
    left: 0;
    background-color: #ffffff;
    border-right: 1px solid #d8dbdf;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
  }
  .left-header {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    background-color: red;
    color: #fff;
    height: 108px;
    position: relative;
  }
  .left-list {
    z-index: 999 !important;
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
    opacity: 1;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: slideLeft;
    animation-name: slideLeft;
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    background-color:red;
  }
  .list-layers {
    position: absolute;
    height: 100%;
    overflow-y: scroll;
  }
  .layer {
    float: left;
    width: 100%;
    padding: 10px;
    background-color: #ffffff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #f7f7f7;
  } 
  </code></pre>