html - tag - desbordamiento: oculto no recorta contenido posicionado absoluto

tag html em

Question

Estoy tratando de hacer una caja con texto de desplazamiento dentro. El problema es que, cuando el texto está a mitad de camino del cuadro, se muestra afuera cuando espero que se recorte.

El HTML / CSS es muy simple y no tengo ni idea de lo que podría estar yendo mal:

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

No es "desbordamiento: oculto"; ¿Supongo que ocultar el contenido desbordante?

Editar:

Agregar "posición: relativo" a la caja resuelve el problema pero aún estoy desconcertado ... ¿Podría alguien explicar este comportamiento?

Answer 1

Los elementos de posición absoluta no se ven afectados por ninguna configuración de overflow si el elemento con esa configuración no es (o no contiene) su bloque que contiene (generalmente, esto significa que no está posicionado).

En su caso, el cuadro no está posicionado, por lo que el texto se ancla a la ventana gráfica en lugar del cuadro. El cuadro no conoce el texto y la ventana gráfica es lo suficientemente grande como para contener el texto, por lo que no se produce ningún recorte. Puede encontrar los detalles sangrientos en la sección 11.1 de la especificación.

Dando la position: relative su cuadro position: relative hará que el texto se posicione en relación con el cuadro y se recorte como resultado.

#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

No haga el elemento dentro de la position:absolute la caja position:absolute .

CSS

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

Ver actualizado http://jsfiddle.net/V98bg/4/