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

Question

Apr 22, 2016, 03:29 AM

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

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

<div class="outer">
  <div class="inner">
    <a>hehe</a>
  </div>
</div>

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

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

Respuestas a la pregunta(2)

Repita el código cada x segundos, pero no si [insertar cheque aquí]

¿MVC 4 cómo validar una fecha no estadounidense con la validación del cliente?

Agregar una imagen de fondo a un panel

Qt: Método apropiado para implementar la panorámica (Arrastrar)

¿Cuál es la mejor manera de manejar las diferencias de paisaje / retrato en IB?