es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

CSS overflow: hidden no funciona con el botón.

11 Jun, 2023 Programación

¿Por qué se tiene en cuenta el tamaño de .div2 dentro de .div1 aunque .button tenga overflow: hidden?

EDITAR: Como se puede ver, .div1 tiene una altura de 150px (correspondiente a .div2) en lugar de 50px (correspondiente a .button).

Solo añadir display: flex parece estar funcionando. ¿Por qué?

.div1 {
padding: 10px;
background-color: orange;
}

.div2 {
width: 50px;
height: 150px;
background-color: red;
}

.button {
height: 50px;
overflow: hidden;
/* display: flex; */
}



Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    La razón por la cual el tamaño de .div2 se tiene en cuenta dentro de .div1 aunque .button tiene overflow: hidden es porque la altura de .button está establecida en 50px, mientras que la altura de .div2 está establecida en 150px. La propiedad overflow: hidden sólo afecta al desbordamiento del contenido del elemento, pero no afecta al tamaño del elemento en sí mismo.

    Añadir display: flex a .button parece funcionar porque convierte el elemento botón en un contenedor flex, lo que significa que sus elementos hijos pueden ser alineados y posicionados de manera flexible. Por defecto, la propiedad flex-direction de un contenedor flex se establece en row, lo que significa que sus elementos hijos se colocan en una línea horizontal. En este caso, ya que .button es ahora un contenedor flex, su elemento hijo .div2 puede ocupar toda la altura de .button y ya no está limitado a la altura original de 50px de sus padres (div1 y button).

Comments are closed.