Правое поле CSS не работает внутри элемента Div с прокруткой переполнения

Я пытаюсь сделать два div, один внутри другого. Внутренний div больше внешнего div, внешний div имеет overflow:scroll, а внутренний div имеет margin:25px. Так что я делаю это:

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

...

Вместо того, чтобы внутренний div имел поле в 25 пикселей по всему периметру, как и ожидалось, есть поле в 25 пикселей с ТРЕХ сторон, но с правой стороны его нет. На мой взгляд, это крайне контр -интуиция.

Если я добавлю средний div с достаточно большой шириной, чтобы содержать внутренний div + 50px, мы можем сделать так, чтобы он выглядел правильно, но это похоже на хакерский обходной путь.

См. мой пример на JSFiddle:http://jsfiddle.net/d3Nhu/16/

Это происходит одинаково во всех основных браузерах. Есть ли веская причина для такого поведения? Это правильное поведение в соответствии со спецификацией CSS?

ПРИМЕЧАНИЕ. :Как и следовало ожидать в этом примере, нет никакой разницы, если вы используете overflow:autoвместо overflow:scroll.

РЕДАКТИРОВАТЬ:Обратите внимание, что я не ищу обходной путь для этой проблемы. (Я уже нашел один. )Мне нужны сведения о причине такого поведения, особенно если оно задокументировано в спецификации CSS в любом месте.