This is the correct behavior. overflow: hidden
will clip content that extends outside the box. Padding is inside the box, so content will happily overflow into that space if necessary.
(source)
To get the effect you seem to be aiming for, one solution is wrap your div.foo in an another div and set the background on that one instead, like this:
<div class="foowrapper">
<div class="foo">purrrrrrrrr</div>
</div>
.foo {
overflow: hidden;
width: 40px;
}
.foowrapper {
padding-right: 10px
background: red;
border: 1px solid green;
}