Desbordamiento de configuración: oculto solo para ciertos elementos

http: //jsfiddle.net/waitinforatrain/sEX3n

Tengo dos divs en un contenedor con posición absoluta. Ambos están configurados para estar fuera de los límites del contenedor. Si descomento el desbordamiento: línea oculta, ocultará todo lo que esté fuera del contenedor.

Sin embargo, solo quiero que el desbordamiento de div1 esté oculto y que los div2 estén visibles. Pero debido a que overflow: hidden debe establecerse en el padre, los ocultará a ambos. ¿Hay alguna forma de ocultar uno?

Incluso si pudiera obtenerlo para que muestre un desbordamiento en los límites superior e inferior, pero no a la izquierda y a la derecha, eso sería adecuado (intenté jugar con overflow-x y overflow-y pero deduzco que ese no es su propósito previsto). @

<div id="container"> 
    <div id="div1"></div> 
    <div id="div2">Test</div> 
</div> 

#container {
    width: 300px;
    position: relative;
    border: 1px solid #000;
    height: 10px;
    /*overflow: hidden;*/
}

#div2 {
    position: absolute;
    top: 16px;
    border: 1px solid #444;
}

#div1 {
    position: absolute;
    height: 10px;
    left: 90%;
    width: 15%;
    background-color: purple;
}

Respuestas a la pregunta(2)

Su respuesta a la pregunta