title: CSS Right Margin Does Not Work Inside a Div With Overflow Scroll
body: <p>I am trying to make two divs, one inside the other. The inner div is larger than the outer div, the outer div has <code>overflow:scroll</code>, and the inner div has <code>margin:25px</code>. So I do this:</p>
  
  <pre><code>#outer {
      width: 200px;
      height: 100px;
      overflow: scroll;
  }
  #inner {
      width: 400px;
      height: 200px;
      margin: 25px;
  }
  </code></pre>
  
  <p>...</p>
  
  <pre><code>&lt;div id="outer"&gt;
      &lt;div id="inner"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>See my example on JSFiddle: <a href="http://jsfiddle.net/d3Nhu/16/">http://jsfiddle.net/d3Nhu/16/</a></p>
  
  <p>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?</p>
  
  <p>NOTE: As you'd expect in this example, it makes no difference if you use <code>overflow:auto</code> instead of <code>overflow:scroll</code>.</p>
  
  <p><strong>EDIT</strong>: Please note that I'm <em>not</em> looking for a workaround for this behavior. (I already found one.) I'm looking for any insight as to the <em>reason</em> for this behavior, especially if it is documented in the <a href="http://www.w3.org/TR/CSS21/">CSS specification</a> anywhere.</p>