Когда дочерний элемент переполняется горизонтально, почему правильное заполнение родительского элемента игнорируется?

Учитывая эту простую структуру:

<div id="parent">
    <div id="child">Lorem ipsum</div>
</div>

с этим CSS:

#parent {
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow-x: scroll;
}

#child {
    width: 500px;      
}

Live demo: http://jsfiddle.net/523me/5/

Обратите внимание, что родительский элемент имеет дополнение 20px и что ребенок переполняется горизонтально (потому что он шире). Если вы прокрутите родительский элемент до упора вправо, вы увидите, что ребенок касается правого края родителя.

Итак, родитель должен иметь правильное заполнение, но оно игнорируется. Кажется, что когда ребенок имеет фиксированную ширину, правильное дополнение родителя не применяется. (Это указано стандартом? Я хотел бы знать. Пожалуйста, дайте мне знать, если вы найдете что-нибудь!)

Есть ли способ принудительно применить правильное дополнение к этому сценарию без необходимости удаления каких-либо элементов из потока (путем плавания или позиционирования)?

Снимок экрана 1 - правое заполнение игнорируется. Так ведут себя все текущие браузеры.

Снимок экрана 2 - применяется правое дополнение. Это то, что я пытаюсь выполнить. (Btw, скриншот от IE7, который является единственным браузером, который не игнорирует правильное заполнение.)

Ответ 1

Вы страдаете от этой проблемы.

Я бы решил это, предоставив родительский знак (а не дополнение к родительскому элементу):

#parent {
    width: 200px;
    height: 200px;
    overflow-x: scroll;
    background: gray;
}

#child {
    width: 500px;
    background: yellow;  
    display: inline-block;
    margin: 20px; 
}

Демо: jsFiddle

Ответ 2

Нет, заполнение не игнорируется, но оно все еще находится внутри родителя.

Смотрите обновленный jsFiddle, где вы можете видеть, что отступы не перемещаются из исходного положения.

Изменить: Хм, есть некоторые аномалии. Если вы дадите внутреннему div правую границу, это тоже игнорируется. Гектометр Активируйте свой вопрос.

Ответ 3

Не знаю, но добавив:

#child{
  display: inline-block;
}

Кажется, исправить это: http://jsfiddle.net/523me/6/

Я тестировал только последний Chrome, возможно, не перекрестный браузер

Ответ 4

Вы можете изменить отступ к границе.

padding: 20px;

к

border: 20px solid gray;

Ответ 5

Применить padding-right к самому переполняющему элементу и переместить фон в его прямой дочерний элемент.

<div id="parent">
    <div id="child"><div>Lorem ipsum...</div></div>
</div>

<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>

http://jsfiddle.net/523me/9/