overflow-y: visible no funciona cuando overflow-x: hidden está presente

No funciona correctamente en Chrome o Firefox. ¿Hay alguna solución a esto?overflow-y: visible no funciona cuando overflow-x: hidden está presente

<!DOCTYPE html> 
    <html> 
    <head></head> 
    <body> 
    <h3>overflow-y:visible</h3> 

    with overflow-x:hidden 
    <div style="overflow-x:hidden;overflow-y:visible;width:100px;height:100px; position:relative;background:#666;"> 
     <div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;"> 
     </div> 
    </div> 

    without overflow-x:hidden 
    <div style="overflow-y:visible;width:100px;height:100px;position:relative;background:#666;"> 
     <div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;"> 
     </div> 
    </div> 

    </body> 
    </html>

http://jsfiddle.net/sMNyK/

El escenario de la vida real implica componentes que es absolutamente necesario tener desbordamiento-x: oculto, pero que activará emergente-menús que tienen que ser capaces de liberarse del elemento en la dirección y . ¿Debo colocar esos menús fuera de sus componentes principales o hay una solución mejor?

Fuente

2012-07-17 Seppo420

Vi esto, que parece que sigue siendo un problema en FF (v21) y Chrome (v27). Mi problema: 'overflow-x: visible; overflow-y: hidden; 'pero el recorte se produce en ambos ejes. – Sprintstar

También encontré este problema hoy, tanto en FF como en Chrome. Ciertamente parece un error en lugar de un comportamiento esperado. – smohadjer

consiguiendo problema porque posición: relativo; –

creo que se puede conseguir lo que quieres con un extra de envolver div que hace el escondite, pero no tiene la position: relative conjunto (see fiddle):

<div style="overflow-y:visible;width:100px;height:100px;position:relative;background:#666;"> 
    <div style="overflow-x:hidden"> 
    ooooooooooooooooooooooooooooooooooooooooooooooo 
     <div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;"> 
     </div> 
    </div> 
</div>

Fuente

2012-07-17 12:24:25 ScottS

Esto no funcionará, ya que los componentes que requieren overflow-y: visible están dentro de los que requieren overflow-x: hidden – Seppo420

@ user1185421 - Primero, dijo en su pregunta que ponerlos "fuera de los componentes principales" era quizás el única opción. Mi solución debería funcionar siempre y cuando los componentes que requieren 'overflow-x: hidden' no tengan una 'posición' establecida en ellos. Esto permitirá que el elemento 'absolute' se relacione solo con el div que es' overflow-y: visible'. – ScottS

@ user1185421 - [aquí hay un violín] (http://jsfiddle.net/sMNyK/4/) con un amplio 'div 'que contiene el div desprendido. – ScottS

Esto probablemente tiene que ver con la cuestión que se aborda aquí: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

En resumen, cuando se utiliza, ya sea para visibleoverflow-x o overflow-y y algo distinto de visible para el otro, el valor visible se interpreta como auto.

Fuente

2013-06-10 09:02:34 Sprintstar

+17

¿Es este un error que los proveedores de navegadores deben corregir o especificar por W3C? Porque es horrible ... – ProblemsOfSumit

2.5 años después y este error todavía existe –

FF 52 y esto todavía sucede. agrega un año más ... – Sebastianb

overflow-y: visible no funciona cuando overflow-x: hidden está presente

Respuesta

Cuestiones relacionadas