Porcentaje de margen / margen en el elemento de la cuadrícula ignorado en Firefox

Este codepen crea una cuadrícula de celdas rojas de 100 * 50 px en Chrome. Este es el comportamiento esperado.

enter image description here

#grid{ display: grid; grid-gap: 8px; grid-template-columns: 100px 100px; } .cell{ background-color: red; padding-bottom: 50%; } 
 

Firefox 52 ignora por completo el padding-bottom: 50%; y no sé por qué

No puedo encontrar ninguna solución. ¿Puede alguien ayudarme?

De la especificación:

6.4. Márgenes y rellenos de elementos de rejilla

Los autores deben evitar el uso de porcentajes en los rellenos o márgenes en los elementos de la grilla en su totalidad, ya que obtendrán un comportamiento diferente en diferentes navegadores.

Aquí está la sección completa:

Como los elementos de la cuadrícula adyacentes están contenidos independientemente dentro del bloque contenedor formado por sus áreas de cuadrícula, los márgenes de los elementos de la cuadrícula adyacentes no colapsan.

Los márgenes de porcentaje y los rellenos en los elementos de la cuadrícula se pueden resolver en función de:

  • su propio eje (los porcentajes izquierdo / derecho se resuelven contra el ancho, la resolución superior / inferior contra la altura), o
  • el eje en línea (porcentajes izquierdo / derecho / superior / inferior todos se resuelven contra el ancho)

Un agente de usuario debe elegir uno de estos dos comportamientos.

Nota: esta varianza apesta, pero captura con precisión el estado actual del mundo (no hay consenso entre las implementaciones, y no hay consenso dentro del CSSWG). Es la intención de CSSWG que los navegadores converjan en uno de los comportamientos, momento en el que la especificación se modificará para exigirlo.

Los autores deben evitar el uso de porcentajes en los rellenos o márgenes en los elementos de la grilla en su totalidad, ya que obtendrán un comportamiento diferente en diferentes navegadores.

Los márgenes automáticos se expanden para absorber espacio adicional en la dimensión correspondiente y, por lo tanto, se pueden usar para la alineación.

Flexbox, otra tecnología CSS3, tiene el mismo problema .

Así es cómo implementé el truco de relleno para un video nested en un contenedor flexible (vea el último punto): https://stackoverflow.com/a/39310591/3597276

Encontré una solución: tuve que agregar un contenedor a la celda con una regla de ‘ancho: 100%’ y ¡finalmente funciona en Firefox 52!

 #grid{ display: grid; grid-gap: 8px; grid-template-columns: 100px 100px; } .cell{ width: 100%; } .inner{ background-color: red; padding-bottom: 50%; }