Überlauf: Versteckt nicht absolut positionierten Inhalt Clip

Question

Ich versuche, eine Box mit Scroll-Text innen zu machen. Das Problem ist, wenn der Text in der Mitte der Box ist, wird es außerhalb angezeigt, wenn ich erwarte, dass es abgeschnitten wird.

Die HTML/CSS ist sehr einfach und ich habe keine Ahnung, was falsch gehen könnte:

#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>

Ist das nicht "overflow: hidden;" supported, um den überfließenden Inhalt zu verbergen?

Edit:

Hinzufügen "Postion: relative" an die Box löst das Problem, aber ich bin immer noch verwirrt ... Könnte jemand dieses Verhalten erklären?

Answer 1

Absolut positionierte Elemente sind von keiner overflow Einstellung betroffen, wenn das Element mit dieser Einstellung seinen umgebenden Block nicht enthält (oder nicht enthält) (normalerweise bedeutet dies, dass es nicht positioniert ist).

In Ihrem Fall ist die Box nicht positioniert, so dass der Text im Viewport statt der Box verankert ist. Die Box weiß nichts über den Text und das Ansichtsfenster ist groß genug, um den Text zu enthalten, so dass überhaupt keine Beschneidung auftritt. Sie können die blutigen Details in section 11.1 der Spezifikation finden.

Wenn Sie Ihre Box eingeben, wird der Text relativ zum Feld positioniert und als Ergebnis abgeschnitten.

#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>

Answer 2

Sie machen das Element nicht in der Box position:absolute.

CSS

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

Siehe aktualisiert http://jsfiddle.net/V98bg/4/