when overflow: auto, padding-bottom is not seen - css

Question

<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur amet, vitae fuga provident et quae aut minus voluptate quidem maiores at recusandae sit deleniti quia dolore, illum reiciendis! Hic, optio Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit accusantium, obcaecati dicta unde repellat illo maxime! Magni officiis, culpa nihil, sequi aliquid vel voluptas quidem laboriosam, omnis nam fuga veniam.</div>
</div>
.content {
width: 200px;
height: 150px;
padding: 20px;
background: yellow;
overflow: scroll;
box-sizing: border-box;
}
http://jsfiddle.net/v6yjLdnp/
Why doesn't the padding-bottom work in this case when scrolling? And how do I make this possible?

Answer 1

I suppose you mean the padding at the bottom of the scrolled content. This seems to be a browser issue - see the comments. But with the following code it should work properly in all browsers.
Transfer some of the settings to the container, then it works as desired:
body {
margin: 0;
}
.container {
width: 200px;
height: 150px;
overflow: scroll;
}
.content {
padding: 20px;
background: yellow;
}
<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur amet, vitae fuga provident et quae aut minus voluptate quidem maiores at recusandae sit deleniti quia dolore, illum reiciendis! Hic, optio Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Fugit accusantium, obcaecati dicta unde repellat illo maxime! Magni officiis, culpa nihil, sequi aliquid vel voluptas quidem laboriosam, omnis nam fuga veniam.</div>
</div>

Answer 2

The problem is probably be caused by the scroll bars.
This is a workaround with using pseudo elements in css, but it might solve your problem:
.content::after { content: ''; display: block; width: 100%; height: 20px; }
EDIT: Remove the padding bottom of the content element to make it work in all browsers:
.content { padding-bottom: 0px; }