CSS overflow-x: visible; y overflow-y: hidden; causando problema con la barra de desplazamiento

Originalmente encontré una forma CSS de omitir esto al usar el plugin Cycle jQuery. Cycle usa JavaScript para establecer mi diapositiva en overflow: hidden, por lo que al establecer mis imágenes en width: 100% las imágenes se verían cortadas verticalmente, por lo que las obligué a ser visibles con !important y para evitar mostrar la animación de la diapositiva fuera de la caja, establecí overflow: hidden en el div contenedor de la diapositiva. Espero que funcione para ti.

ACTUALIZACIÓN - Nueva solución:

Problema original - > http://jsfiddle.net/xMddf/1 / (Incluso si utilizo overflow-y: visible se convierte en "auto" y en realidad "scroll".)

#content {
    height: 100px;
    width: 200px;
    overflow-x: hidden;
    overflow-y: visible;
}

La nueva solución -> http://jsfiddle.net/xMddf/2/ (Encontré una solución alternativa usando un wrapper div para aplicar overflow-x y overflow-y a diferentes elementos DOM como James Khoury aconsejó sobre el problema de combinar visible y hidden a un solo elemento DOM.)

#wrapper {
    height: 100px;
    overflow-y: visible;
}
#content {
    width: 200px;
    overflow-x: hidden;
}

Otro truco barato, que parece hacer el truco:

style="padding-bottom: 250px; margin-bottom: -250px;" en el elemento donde el desbordamiento vertical se está cortando, con 250 representando tantos píxeles como necesite para su menú desplegable, etc.

Me he encontrado con este problema al intentar construir una barra lateral posicionada fija con tanto contenido desplazable vertical y anidado hijos posicionados absolutos para ser mostrados fuera de los límites de la barra lateral.

Mi enfoque consistía en aplicar por separado:

• una propiedad overflow: visible para el elemento sidebar
• una propiedad overflow-y: auto para la envoltura interna de la barra lateral

Por favor, consulte el siguiente ejemplo o una en línea codepen .

html {
  min-height: 100%;
}
body {
  min-height: 100%;
  background: linear-gradient(to bottom, white, DarkGray 80%);
  margin: 0;
  padding: 0;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 200px;
  overflow: visible;  /* Just apply overflow-x */
  background-color: DarkOrange;
}

.sidebarWrapper {
  padding: 10px;
  overflow-y: auto;   /* Just apply overflow-y */
  height: 100%;
  width: 100%;
}

.element {
  position: absolute;
  top: 0;
  right: 100%;
  background-color: CornflowerBlue;
  padding: 10px;
  width: 200px;
}

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<div class="sidebar">
  <div class="sidebarWrapper">
    <div class="element">
      I'm a sidebar child element but I'm able to horizontally overflow its boundaries.
    </div>
    <p>This is a 200px width container with optional vertical scroll.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </div>
</div>

Usé el método content+wrapper... pero hice algo diferente de lo mencionado hasta ahora: Me aseguré de que los límites de mi envoltura no se alinearan con los límites del contenido en la dirección en la que quería ser visible.

NOTA importante: Fue bastante fácil obtener el enfoque content+wrapper, same-bounds para trabajar en un navegador u otro dependiendo de varias combinaciones de css de position, overflow-*, etc... pero nunca pude usar ese enfoque para hacer que todos sean correctos (Edge, Chrome, Safari,...).

Pero cuando tuve algo como: {[12]]}

  <div id    = "hack_wrapper" // created solely for this purpose
       style = "position:absolute; width:100%; height:100%; overflow-x:hidden;">
      <div id    = "content_wrapper"
           style = "position:absolute; width:100%; height:15%; overflow:visible;">         
          ... content with too-much horizontal content ... 
      </div>
  </div>

... todos los navegadores estaban contentos.

Ahora hay una nueva forma de abordar este problema - si elimina position: relative del contenedor que necesita tener el desbordamiento-y visible, puede tener desbordamiento-y visible y desbordamiento-x oculto, y viceversa (tener desbordamiento-x visible y desbordamiento-y oculto, solo asegúrese de que el contenedor con la propiedad visible no esté relativamente posicionado).

Ver este post de CSS Tricks para más detalles-funcionó para mí: https://css-tricks.com/popping-hidden-overflow /