¿Por qué el relleno / margen porcentual no funciona en artículos flexibles en Firefox y Edge?

Quiero tener un div cuadrado dentro de un flexbox. Entonces yo uso:

.outer { display: flex; width: 100%; background: blue; } .inner { width: 50%; background: yellow; padding-bottom: 50%; } 
  

Esto funciona bien en Chrome. Pero en Firefox, el padre se contrae a solo una línea.

¿Cómo resuelvo esto en Firefox? Yo uso la versión 44.

También puede ver el código en https://jsbin.com/lakoxi/edit?html,css

Actualización 2018

La especificación FlexBox ha sido actualizada.

4.2. Flexar márgenes y rellenos de elementos

Los márgenes de porcentaje y los rellenos en elementos flexibles, como los que se encuentran en recuadros, se resuelven frente al tamaño en línea de su bloque contenedor; por ejemplo, los porcentajes izquierdo / derecho / superior / inferior se resuelven contra el ancho del bloque que los contiene en los modos de escritura horizontal.


Respuesta original: se aplica a las versiones FF y Edge lanzadas antes de 2018

De la especificación flexbox :

Los autores deben evitar el uso de porcentajes en los márgenes o los márgenes de los ítems flexibles por completo, ya que obtendrán un comportamiento diferente en diferentes navegadores.

Aquí hay algo más:

4.2. Flexar márgenes y rellenos de elementos

Los márgenes de porcentaje y los rellenos en los ítems flexibles se pueden resolver contra:

  • 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 del CSSWG que los navegadores converjan en uno de los comportamientos, momento en el que se modificará la especificación.

Además de la respuesta de Michael_B , aquí hay una posible solución.

Cuando usamos el porcentaje, a menudo lo relacionamos con el ancho de la ventana gráfica, por lo que, con esto en mente, las unidades de ventana vw / vh pueden ser una opción, ya que funcionan de manera similar (receptivo).

Fragmento de stack

 .outer { display: flex; width: 100%; background: blue; } .inner { width: 50%; background: yellow; padding-bottom: 50vw; }