Setting overflow-x: hidden adiciona uma barra de rolagem vertical [duplicado]
Esta pergunta já tem uma resposta aqui:
CSS overflow-x: visível; e estouro-y: oculto; causando problema na barra de rolagem respostasQuando eu especificaroverflow-x: hidden
em um elemento que transborda horizontal e verticalmente, o elemento obtém uma barra de rolagem vertical além de ocultar o conteúdo que transborda horizontalmente. Eu tentei adicionaroverflow-y: visible
e até apenasoverflow: visible
, sem efeito.
Estou entendendo mal o que essas propriedades fazem? Eu pensaria queoverflow-x
não deve afetar o estouro vertica
sso aconteceu em todos os navegadores que tente
Aqui está um trecho que demonstra o efeito. Estou a usar<pre>
tags porque é uma maneira fácil de criar conteúdo excedente, mas parece acontecer com qualquer tag.
pre {
height: 40px;
width: 150px;
margin-bottom: 50px; /* We need this so they don't overlap. */
}
#x-hidden {
overflow-x: hidden;
}
#y-visible {
overflow-x: hidden;
overflow-y: visible;
}
#visible {
overflow: visible;
overflow-x: hidden;
}
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="x-hidden">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="y-visible">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="visible">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
O W3C spec 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 '.
Mas isso não menciona o caso quandooverflow-x
ouoverflow-y
está configurado parahidden
, o que para mim implica que essa combinação deve ser realmente possíve