CSS Right Margin Does Not Work Inside a Div With Overflow Auto
===

I am trying to make two divs, one inside the other. The inner div is larger than the outer div, the outer div has overflow: scroll, and the inner div has margin: 25px. So I do this:

    #outer {
        width: 200px;
        height: 100px;
        overflow: scroll;
    }
    #inner {
        width: 400px;
        height: 200px;
        margin: 25px;
    }
...

    <div id="outer">
        <div id="inner">
        
        </div>
    </div>

Instead of the inner div having a margin of 25px all the way around as expected, there is a 25px margin on THREE sides, but on the right side there is none. This is extremely counter-intuitive in my opinion.

If I add a middle div with a width large enough width to contain the inner div + 50px, we can make it look right, but that seems like a hacky workaround.

See my example on JSFiddle: http://jsfiddle.net/d3Nhu/16/

This happens the same way in every major browser. Is there any good reason for this behavior? Is this correct behavior according to the CSS specification?