inspeccionar - label html

¿Por qué el porcentaje de relleno/margen no funciona en los artículos flexibles en Firefox?

Question

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%;
}

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

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

Answer 1

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.

Answer 2

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 pila

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

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

Actualizado basado en un comentario

Si un cuadrado es obligatorio, y no se pueden usar unidades de ventana o guión, aquí hay otro truco usando una imagen ficticia.

Tenga en cuenta que, como imagen, también se puede usar un SVG o un Base64 como datauri para guardar un viaje adicional de ida y vuelta al servidor.

.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
}
.inner img {
display: block;
width: 100%;
visibility: hidden;
}

<div class="outer">
<div class="inner">
<img src="http://placehold.it/10" alt="">
</div>
</div>