With standard behavior of `overflow: scroll` the `padding-bottom` is in the bottom of the scrolled block. But how can I make `padding-bottom` fixed, so odd text will not appear right after bottom border

<https://jsfiddle.net/nvg23rp8/6/>

```css
body{
  background-color: green;
}

.wrapper{
 height: 100px;
 width: 300px;
 background: transparent;
 border: 1px solid #000;
 padding-top: 20px;
 padding-bottom: 20px;
 overflow-y: scroll;
 position: fixed;
 left: 10%;
 top: 10%;
}

.middle{
   padding-left: 20px;
   padding-right: 20px;
 height: 100%;

}

.inner{
 background: blue;
 height: 100%;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="middle">
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
    </div>
  </div>
</div>
```