html - tag - Configuración de overflow-x: hidden agrega una barra de desplazamiento vertical

html style tag

Question

Esta pregunta ya tiene una respuesta aquí:

• Overflow-x de CSS: visible; y desbordamiento-y: oculto; causando la barra de desplazamiento problema 5 respuestas

Cuando especifico overflow-x: hidden en un elemento que se desborda horizontal y verticalmente, el elemento obtiene una barra de desplazamiento vertical además de ocultar el contenido desbordado horizontalmente. He intentado agregar overflow-y: visible e incluso solo overflow: visible , sin efecto.

¿Estoy entendiendo mal lo que hacen estas propiedades? Creo que overflow-x no debería afectar el desbordamiento vertical en absoluto.

Esto ha sucedido en todos los navegadores que he probado.

Aquí hay un fragmento que demuestra el efecto. Estoy usando etiquetas <pre> porque son una forma fácil de crear contenido desbordado, pero parece suceder con cualquier etiqueta.

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>

La especificación W3C dice:

Los valores calculados de ''overflow-x'' y ''overflow-y'' son los mismos que sus valores especificados, excepto que algunas combinaciones con ''visible'' no son posibles: si una se especifica como ''visible'' y la otra es ''scroll'' o ''auto'', luego ''visible'' se establece en ''auto''.

Pero esto no hace mención del caso cuando overflow-x o overflow-y se establece en hidden , lo que para mí implica que esta combinación está destinada a ser posible.

Answer 1

En primer lugar, este violín muestra el problema que describes.

Hasta el momento, no sé cómo evitar esto, pero parece que la especificación alude a esto aquí :

Los valores calculados de '' overflow-x '' y '' overflow-y '' son los mismos que sus valores especificados, excepto que algunas combinaciones con ''visible'' no son posibles : si una se especifica como ''visible'' y la otra es ''scroll'' o ''auto'', luego ''visible'' se establece en ''auto''.

Answer 2

Hace solo una hora tuve el problema similar, excepto que el problema ocurrió cuando especifiqué el valor del overflow como auto . No usé overflow-x o overflow-y , solo lo necesitaba para contener completamente mis dos listas que flotaban en extremos opuestos.

Lo que funcionó para mí fue que cambié el valor del overflow a hidden . Trata eso. Establecí el max-width al 100% y en lugar de especificar la altura, acabo de utilizar el overflow: hidden .

Espero que ayude.

Answer 3

Intenta configurar la propiedad de visualización? ¡La declaración de desbordamiento funciona en elementos de nivel de bloque!

Answer 4

Intenta establecer tu altura. O haz que sea 100% o comprueba automáticamente esto

jsfiddle

    height: auto;

Answer 5

Leyendo tu pregunta ... No veo ningún problema ...

Cuando especifico overflow-x: hidden; en un elemento, agrega una barra de desplazamiento vertical.

Si se desborda en su altura (como acabas de decir), entonces eso es bastante normal.

He intentado agregar overflow-y: visible; e incluso solo desbordamiento: visible, sin efecto.

Bueno ... Eso es normal, ya que le estás diciendo que muestre una barra de desplazamiento vertical, que ya existe.

Como dijo kuloir: X = horizontal; Y = vertical

Answer 6

Prueba esto,

height: auto;
overflow:hidden;

Aclamaciones.

Answer 7

Prueba esto:

height: auto;
width: 100px;
overflow: hidden;

Debe mantener el elemento a 100 píxeles de ancho y permitir que se expanda verticalmente en función de su contenido (sin barras de desplazamiento).

Answer 8

Solo use desbordamiento: oculto en un div envoltorio con restricciones de tamaño. Perdona mi formateo con un poco de prisa hoy.

<!DOCTYPE html>
<html>
<head>
<style>
div.hidden 
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
div.overflowing
{
width:300px;
height:200px;
}
</style>
</head>

<body>
<p>overflow:hidden</p>
<div class="hidden">
<div class="overflowing">
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
</div>
</div>
</body>
</html>

Véalo en acción aquí: http://jsfiddle.net/4PZC9/

Answer 9

Tal vez malinterpretaste algo, no desenterré la pregunta ... o el problema no está en la configuración de desbordamiento.

Overflow: auto agregará la barra de desplazamiento solo si es necesario (contenido más grande que el contenedor). Òverflow: visible agregará la barra de desplazamiento. Òverflow: hidden NO agregará la barra de desplazamiento.

Entiendo que quiere que el contenido x esté oculto, por lo que overflow-x: hidden , pero a partir de su pregunta me parece que no quiero que la barra de desplazamiento vertical vea el contenido desbordado verticalmente.

Tal vez el problema es que se establece una altura fija (o altura máxima) para el contenedor y el contenido es más grande. Elimine la altura (o la altura máxima) y evitará la barra de desplazamiento vertical.

... o como dije, simplemente no entendí cuál es el efecto deseado.

Answer 10

Vea esta respuesta a una pregunta relacionada: https://.com/a/6433475/3583023

Explica por qué

el {
  overflow-x: hidden;
  overflow-y: visible;
}

rinde como

el {
  overflow-x: hidden;
  overflow-y: auto;
}

que generalmente representa lo mismo que

el {
  overflow-x: hidden;
  overflow-y: scroll;
}

porque el valor auto de overflow-y es scroll en la mayoría de los navegadores.

Entonces, para lograr este efecto, no podemos usar las propiedades overflow-x/overflow-y . He experimentado con la propiedad clip como una alternativa potencial, pero hasta ahora no he tenido suerte: http://jsfiddle.net/qvEq5/