CSS overflow-x: visível; e estouro-y: oculto; causando problema na barra de rolagem

Suponha que você tenha algum estilo e a marcação:

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px; 
}
li
{
  display: inline-block;
}

<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

Quando você vê isso. O <ul>possui uma barra de rolagem na parte inferior, embora eu tenha especificado valores visíveis e ocultos para o estouro x / y.

(observado no Chrome 11 e ópera (?))

Eu estou supondo que deve haver alguma especificação do w3c ou algo dizendo isso para acontecer, mas para a minha vida eu não consigo entender o porquê.

JSFiddle

UPDATE: - Encontrei uma maneira de obter o mesmo resultado adicionando outro elemento ao redor do ul. Confira.

Depois de uma pesquisa séria, parece que encontrei a resposta para minha pergunta:

from: http://www.brunildo.org/test/Overflowxy2.html

No Gecko, Safari, Opera, 'visível' se torna 'automático' também quando combinado com 'oculto' (em outras palavras: 'visível' se torna 'automático' quando combinado com qualquer outra coisa diferente de 'visível'). Gecko 1.8, Safari 3, Opera 9.5 são bastante consistentes entre eles.

também a especificação do W3C diz:

Os valores calculados de 'overflow-x' e 'overflow-y' são os mesmos que os valores especificados, exceto que algumas combinações com 'visible' não são possíveis: se um for especificado como 'visible' e o outro for 'scroll' ou 'automático', então 'visível' é definido como 'automático'. O valor calculado de 'overflow' é igual ao valor calculado de 'overflow-x' se 'overflow-y' for o mesmo; caso contrário, é o par de valores calculados de 'overflow-x' e 'overflow-y'.

Versão curta:

Se você estiver usando visiblepara um overflow-xou overflow-youtro algo que não seja visiblepara o outro, o visiblevalor será interpretado como auto.

outro truque barato, que parece fazer o truque:

style="padding-bottom: 250px; margin-bottom: -250px;"no elemento em que o estouro vertical está sendo cortado, 250representando quantos pixels você precisa para o menu suspenso etc.

Originalmente, encontrei uma maneira CSS de contornar isso ao usar o plug-in Cycle jQuery. Ciclo usa JavaScript para definir meu slide como overflow: hidden, portanto, ao definir minhas fotos com width: 100%aparência de corte vertical, forço-as a ficarem visíveis !importante evitar mostrar a animação do slide fora da caixa que definioverflow: hidden para a div contêiner do deslizar. Espero que funcione para você.

UPDATE - Nova solução:

Problema original -> http://jsfiddle.net/xMddf/1/ (Mesmo se eu o usar, overflow-y: visibleele se tornará "automático" e, na verdade, "rolar").

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

A nova solução -> http://jsfiddle.net/xMddf/2/ (Encontrei uma solução alternativa usando uma div wrapper para aplicar overflow-xe overflow-ya diferentes elementos DOM, como James Khoury aconselhou sobre o problema de combinar visiblee hiddenum único elemento DOM).

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

Eu me deparei com esse problema ao tentar criar uma barra lateral posicionada fixa com conteúdo rolável verticalmente e filhos posicionados absolutos aninhados para serem exibidos fora dos limites da barra lateral .

Minha abordagem consistiu em aplicar separadamente:

• uma overflow: visiblepropriedade para o elemento da barra lateral
• uma overflow-y: autopropriedade para o wrapper interno da barra lateral

Por favor, verifique o exemplo abaixo ou um código de acesso online .

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>

Usei a content+wrapperabordagem ... mas fiz algo diferente do mencionado até agora: verifiquei se os limites do meu wrapper NÃO estavam alinhados com os limites do conteúdo na direção em que eu queria estar visível .

Nota importante: Foi fácil o suficiente para obter a content+wrapper, same-boundsabordagem ao trabalho em um navegador ou outra, dependendo de várias combinações CSS position, overflow-*etc ... mas eu nunca poderia usar essa abordagem para obtê-los todos correto (Edge, Chrome, Safari,. ..)

Mas quando eu tinha algo como:

  <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 os navegadores estavam felizes.

Agora existe uma nova maneira de resolver esse problema - se você remover a posição: relativa do contêiner que precisa ter o estouro-y visível, você poderá ter o estouro-y visível e o estouro-x oculto e vice-versa (ter o estouro- x visível e excedente-y oculto, apenas verifique se o contêiner com a propriedade visible não está relativamente posicionado).

Veja esta postagem do CSS Tricks para obter mais detalhes - funcionou para mim: https://css-tricks.com/popping-hidden-overflow/