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

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

Lorem ipsum

с этим CSS:

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

#child {
    width: 500px;      
}

Живая демонстрация:http://jsfiddle.net/523me/5/

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

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

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

enter image description here

Скриншот 1. Правый отступ игнорируется. Так ведут себя все современные браузеры.

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

47
задан Šime Vidas 7 April 2012 в 14:17
поделиться