CSS border-box with border causes unnecessary scrollbar

Question

I have made this example http://jsfiddle.net/drulia/34TKp/

basically whenever I combine border with border-box the js scrollHeight becomes 1px bigger then it suppose to be. As you see in example the parent element has no height set, it has overflow:auto; just for visual purposes to show that for some reason scrollbar appears.

If you try to comment border-top or box-sizing, you'll notice that scrollbar disappears and offsetHeight becomes equal to scrollheight.

It really driving me crazy and so far I'm glad that I found what css properties causing this problem, but I'm curious maybe someone knows why things happen the way they happen? this happens on FF, Chrome and IE10, I just didn't included prefixed box-sizing for FF in example.

Update

Just to clarify - I'm asking why combination of box-sizing with border causes this problem? Am I doing something wrong or there is a bug, or this suppose to be an expected behaviour, which I'm very doubt.

I do know about simple fixes, like changing overflow property, removing border, etc.

Answer 1

Change:

.jspPane {
    position: absolute;
    overflow: auto;
}

To:

.jspPane {
    position: absolute;
    overflow: hidden;
}

http://jsfiddle.net/34TKp/2/

Or you can keep the css as you have it, but add a height attribute to .jspane. If you don't want to set a height you can add display:table; to .jspane

UPDATE

Just read your update/edit. I would say because the border attribute adds to the height/width. In your case, you've got border-top: 1px solid #e0e0e0; for .item. You've set it with a height of 35px, but the border-top adds 1px onto this. If you change the height from 34px to 35px then this will fix it. See it here: http://jsfiddle.net/34TKp/3/