Margins are for moving an element in from the wrapper, not expanding the wrapper outwards.
This behavior is consistent with specifying a width in addition to a horizontal margin anywhere in the document. To break it down, consider the following snippet, where I specificity a wrapper without an overflow property, and the margin does not expand the wrapper element.
As you can see, the margin did not cause the wrapper to expand in size, the element just continued to overflow. This behavior is documented under Visual formatting model details of the is documented in the CSS 2.1 specification.
The following constraints must hold among the used values of the other properties:
If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.
That excerpt is quite dense, so to simply, let's ignore the width of border and padding, both of which are 0, leaving us with width, margin-left, and margin-right.
Now since the you have a fixed width and values for margin-left and margin-right, the values are "over-constrained". Now in our example, since the direction is ltr by default, the margin-right is forced to compensate.
To see the effects of the direction, let's try adding a dir="rtl" attribute to the wrapper element.
border: 1px solid black;
margin: 0 20px;
<div class="outer" dir="rtl">
Now the element is overflowing to the left. Let's see if this dir="rtl" attribute has the same effect on your overflow: scroll example.
border: 1px solid #00F;
border: 1px solid #F0F;
<div id="outer" dir="rtl">
Yep, it does. The margin is now missing on the left, rather than the right.
Mainly because the specification does not say it should. Let's take a look at the CSS 2 specification for the overflow property.
Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.
See how it specifically says "clipped out content". For an explanation of "content", lets refer to the following graphic from the CSS 2 specification.
As we can see, the margin is separate from the content. However, at this point it's worth noting that padding and borders are included in the scrolling area, so when the the spec says "content", it is likely referring to border-box, or at least, that seems to be how it was interpreted.
Basically, margins behave differently on inline-block elements, because they are content level rather than block level, and they do not have a concept of being "over-constrained".