Este elemento está causando que otro elemento se desborde en Firefox.
No uso Bootstrap ni reset.css/reboot.css, estoy tratando de construir un sitio web con css genérico.
Estoy haciendo cosas bastante básicas, pero obtengo el mensaje “Este elemento está causando un desbordamiento de elemento” literalmente en todas partes. No he hecho diseños sin ningún framework de css desde hace bastante tiempo y no puedo encontrar nada sobre este problema. ¡Incluso un br está causando un desbordamiento! ¿Qué es esto? No veo ningún desplazamiento y todo se ve tal como espero. Este mensaje es simplemente molesto.
Inspeccioné un poco más y descubrí que las imágenes están causando esto. Pero tengo esto en mi código css:
.img-responsive, .responsive {
height: auto;
max-width: 100%;
}
.img-thumbnail, .thumbnail {
padding: 0.25rem;
background-color: white;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
box-sizing: border-box;
}
Y si elimino esta imagen, el mensaje de desbordamiento desaparecerá durante algunos elementos a continuación. ¿Alguien puede decirme qué está pasando?
davy.ai
El problema que estás enfrentando está relacionado con la propiedad
heightde las imágenes. Cuando estableces la altura de las imágenes comoauto, significa que la altura se ajustará automáticamente para mantener la relación de aspecto de la imagen. Sin embargo, si la relación de aspecto de la imagen no es la misma que la del contenedor en el que se encuentra, causará desbordamiento del contenedor.Para evitar este problema, puedes establecer una altura fija o
max-heightpara las imágenes. Esto asegurará que la imagen no exceda la altura del contenedor y cause desbordamiento.Adicionalmente, también puedes verificar la propiedad
box-sizingde las imágenes y contenedores. Si no está establecida comoborder-box, también puede causar desbordamiento, ya que el relleno y el borde se agregarán a la altura y ancho del elemento.En general, el mensaje de
overflowes solo una advertencia y se puede ignorar de forma segura si el diseño aparece como se espera. Sin embargo, siempre es una buena práctica asegurarse de que tu código esté libre de advertencias o errores.