Desbordamiento de CSS: fuerza un desbordamiento de div

Question

¿Es posible dejar que solo un cierto elemento desborde un div principal?

Oculto todos los divs secundarios para que no se desborde, pero necesito que uno de los elementos secundarios se desborde y flote fuera del elemento primario limitante.

Consulte http://sandbox.pixelcraftwebdesign.com/engineering y ejecute algunos cálculos con números aleatorios.

El pequeño número rojo en la esquina superior derecha debe flotar sobre y fuera de la div de salida.

Answer 1

Suponiendo que desea que los anchos de siguen siendo los mismos:

1. Retire overflow:hidden de .output.
2. Conjunto .output .right a width:257px;overflow:hidden.
3. Conjunto .result-rh, .result-temp a width:241px.

Esta solución permite el desbordamiento en el contenedor, pero oculta el desbordamiento en el lado derecho. También le da al lado derecho el tamaño adecuado para evitar que se recorten las SPAN resultantes.

Funciona para mí en Firefox 3.6.17. Debería funcionar en otros navegadores también.

Answer 2

no

todo seguro de lo que está después, pero aquí es un violín que demuestra una cierta div niño flotando afuera y mostrando todo su contenido: http://jsfiddle.net/dcpDa/

<div id="parent"> 
    <div class="dontShow">Dont Show All Of Me</div> 
    <div class="dontShow">Dont Show All Of Me</div> 
    <div class="dontShow">Dont Show All Of Me</div> 
    <div class="dontShow">Dont Show All Of Me</div> 
    <div class="doShow">Okay, Show All Of Me</div> 
    <div class="dontShow">Dont Show All Of Me</div> 
    <div class="dontShow">Dont Show All Of Me</div> 
    <div class="dontShow">Dont Show All Of Me</div> 
</div> 

CSS:

div { 
    width: 5em; /*constrain div */ 
    height: 1em; 
    border: 1px solid #aaa; 
    background-color: #ccc; 
} 
.dontShow { overflow: hidden; } /* do not show overflow */ 

.doShow { 
    width: auto; /* over ride constraints and show all */ 
    height: auto; 
    position: absolute; /* break from flow */ 
    left: 15em; /* position where you want */ 
} 

Aquí hay dos artículos sobre el posicionamiento de CSS que encontré útil recientemente:
css Floats 101
Css Positioning 101

Answer 3

Use position: absolute; en el niño que desea mostrar. A continuación, puede usar top, left, height y width para colocarlo donde desee.