Правая граница 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 id="outer">
    <div id="inner">

    </div>
</div>

Вместо внутреннего div, имеющего край 25px, все вокруг, как и ожидалось, на THREE стороне есть 25px margin, но с правой стороны нет. На мой взгляд, это чрезвычайно противоречиво.

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

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

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

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

EDIT. Обратите внимание, что я не ищу обходного пути для такого поведения. (Я уже нашел его.) Я ищу любое представление о причине такого поведения, особенно если оно описано в спецификации CSS где угодно.

Ответ 1

TL; DR:

Поля для перемещения элемента из оболочки, а не расширения оболочки наружу.

Длинное объяснение:

Это поведение согласуется с указанием a width в дополнение к горизонтальной margin в любом месте документа. Чтобы разбить его, рассмотрим следующий фрагмент, в котором я специфицирую оболочку без свойства overflow, а margin не расширяет элемент оболочки.

body {
    padding: 20px;
}
.outer {
    width: 400px;
    border: 1px solid black;
}
.inner {
    width: 400px;
    height: 40px;
    margin: 0 20px;
    background: grey;
}

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

Ответ 2

добавить display:inline-block; в #inner div

см. этот fiddle