Переполнение: скрытый не фиксирует абсолютный позиционированный контент

Я пытаюсь создать окно с прокручиваемым текстом внутри. Проблема в том, что, когда текст находится на полпути, он отображается за его пределами, когда я ожидаю, что оно будет обрезано.

HTML/CSS очень прост, и я понятия не имею, что может быть неправильным:

#vbox {
  width: 100px;
  height: 500px;
  overflow: hidden;
  background: #afa;
}
#vtext {
  position: absolute;
  width: 100px;
  top: 250px;
}
<div id="vbox">
  <div id="vtext">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
    <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
  </div>
</div>

Ответы

Ответ 1

Абсолютно позиционированные элементы не влияют ни на какой параметр overflow, если элемент с этим параметром не содержит (или не содержит) его содержащий блок (обычно это означает, что он не расположен).

В вашем случае поле не расположено, поэтому текст привязывается к окну просмотра вместо поля. Коробка не знает о тексте, и окно просмотра достаточно велико, чтобы содержать текст, поэтому никаких обрезков вообще не происходит. Вы можете найти подробные сведения в раздел 11.1 спецификации.

Предоставление вашей коробки position: relative приведет к тому, что текст будет помещен относительно поля и в результате будет обрезано.

#vbox {
  position: relative;
  width: 100px;
  height: 500px;
  overflow: hidden;
  background: #afa;
}
#vtext {
  position: absolute;
  width: 100px;
  top: 250px;
}
<div id="vbox">
  <div id="vtext">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
    <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
  </div>
</div>

Ответ 2

Не делайте элемент внутри коробки position:absolute.

CSS

#vbox{
    width:100px;
    height:500px;
    overflow:auto;
    background:#afa;
}
.vtext{
    font-size: 12px;
}

См. обновленный http://jsfiddle.net/V98bg/4/