title: Scroll bar doesn't reach bottom
body: <pre><code>.flipper-back {
    background: #FFF none repeat scroll 0% 0%;
  }
  .flipper-back {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
  }
  .flipper-back {
    display: block;
    backface-visibility: hidden;
    transition: transform 1s ease 0s;
  }
  .pad-box {
    padding: 40px 35px 45px 45px;
  }
  .pad-30-0-0 {
    padding: 30px 0px 0px;
  }
  
  
  &lt;div style="height: 100%; overflow: hidden;" class="flipper-back"&gt;
  
    &lt;a id="csFlipperClose" href="#" class="js-flipper-flip flipper-close"&gt;&lt;/a&gt;
  
    &lt;div style="height: 100%; overflow: auto; margin-right: -10px;" class="pad-box"&gt;
      &lt;h3 class="colored"&gt;Customer support&lt;/h3&gt;
  
      &lt;div class="pad-30-0-0"&gt;
        &lt;b&gt;&lt;span id="csSelectedIssue"&gt;Test&lt;/span&gt;&lt;/b&gt;
  
        &lt;br&gt;
        &lt;br&gt;
        &lt;span id="csSelectedReadMore"&gt;large text &lt;/span&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When the div consist from big texts scroll bar appears but it doesn't scroll to the end of the text. I ahve created fiddle where you can see what I am talking about. In the example the end of the text is <strong>"gggggg60"</strong> but scroll reaches until <strong>"gggggg55"</strong>. Any suggestions how to fix this issue? <a href="http://jsfiddle.net/L9ep8rmq/1/" rel="nofollow">link to fiddle</a></p>