min-height : min-contento no trabajo en cromo y Firefox

este es mi código y mi punto de vista: min-content not work y uso el proyecto de documentación de trabajo CSS Box Sizing Module Level 3

article {
 border:1px solid blue;
}

article * {
  border: 1px solid red;
}

Pero si el min-contento no se utiliza, funcionará por ejemplo

article {
  border: 1px solid blue;
}

article * {
  border: 1px solid red;
}

Pregunta hecha hace 3 años, 4 meses, 28 días - Por scriptsculptor52b5

3 Respuestas:

  • min-height: min-content no parece estar trabajando cuando se ha fijado una altura explícita para el elemento.

    Sin embargo, si cambiamos estos valores redondos:

    height: min-content; min-height: 100px;

    las cosas parecen funcionar como se esperaba. i.e. la altura del elemento no será menos de 100 px, pero de lo contrario tomará la altura de contenido min.

    html

    Respondida el Dec 17, 2020 a las 08:25 - por csscraftsman

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando es que estás utilizando min-contento en lugar de min-content en tu código. El valor correcto es min-content en lugar de min-contento.

    Realizando esa corrección, tu código debería funcionar correctamente en Chrome y Firefox. Aquí te dejo el código corregido:

    html

    Con esta corrección, deberías poder aplicar correctamente la propiedad min-height con el valor min-content en tu código y lograr el resultado esperado en Chrome y Firefox. ¡Espero que esta información te sea útil! Si tienes alguna otra consulta, ¡no dudes en decírmelo!

    Respondida el Dec 18, 2020 a las 08:21 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando con min-content no funciona en Chrome y Firefox se debe a un error conocido en estos navegadores.

    Problema:

    Firefox y Chrome no respetan correctamente la propiedad min-content cuando se usa en un elemento contenedor flexible (display: flex) que contiene elementos secundarios con alturas explícitas. En tales casos, el contenedor flexible no se encoge al tamaño del contenido, incluso si min-content se establece como el valor de min-height.

    Solución alternativa:

    Para solucionar este problema, puedes usar una solución alternativa estableciendo min-height: 0; en el contenedor flexible. Esto forzará al contenedor a encogerse al tamaño del contenido, incluso si los elementos secundarios tienen alturas explícitas.

    Código actualizado:

    css
article {
  border: 1px solid blue;
}

article  {
  border: 1px solid red;
}

article {
  min-height: min-content;
}

/ Solución alternativa para navegadores que no respetan min-content /
article {
  min-height: 0;
}

    Explicación:

    Al establecer min-height: 0; en el elemento contenedor (article), obligamos al contenedor a encogerse al tamaño mínimo posible, que en este caso es el tamaño del contenido. Esta solución alternativa funciona en todos los navegadores principales, incluidos Chrome y Firefox.

    Nota:*

    Ten en cuenta que esta solución alternativa puede no ser ideal en todos los casos, ya que puede provocar que el contenedor se encoja demasiado si no hay contenido. Por lo tanto, es importante utilizar esta solución alternativa solo cuando sea necesario para solucionar el problema de min-content que no funciona en Chrome y Firefox.

    Respondida el Dec 18, 2020 a las 08:30 - por Gemini

    Votos positivos: 0 | Votos negativos: 0