¿Por qué el porcentaje de relleno/margen no funciona en elementos flexibles en Firefox y Edge?
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 soluciono 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 de flexbox ha sido actualizada.
4.2. Flexionar márgenes y rellenos de elementos
Los márgenes porcentuales y los rellenos en elementos flexibles, como los de las cajas de bloques, se resuelven en función del tamaño en línea de su bloque contenedor; por ejemplo, los porcentajes izquierdo/derecho/superior/inferior se resuelven en función del ancho de su bloque contenedor en modos de escritura horizontal.
Respuesta original: se aplica a las versiones FF y Edge lanzadas antes de 2018
De la especificación de flexbox :
Los autores deben evitar por completo el uso de porcentajes en los rellenos o márgenes de los elementos flexibles, ya que obtendrán un comportamiento diferente en diferentes navegadores.
Aquí hay algo más:
4.2. Flexionar márgenes y rellenos de elementos
Los márgenes porcentuales y los márgenes en elementos flexibles se pueden resolver según:
- su propio eje (los porcentajes izquierdo/derecho se resuelven en función del ancho, los porcentajes superior/inferior se resuelven en función de la altura), o,
- el eje en línea (los porcentajes izquierdo/derecho/superior/inferior se resuelven en función del ancho)
Un Agente de Usuario debe elegir uno de estos dos comportamientos.
Nota: Esta variación apesta, pero captura con precisión el estado actual del mundo (no hay consenso entre las implementaciones ni dentro del CSSWG). La intención del CSSWG es que los navegadores converjan en uno de los comportamientos, momento en el cual 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, teniendo esto en cuenta, las unidades de ventana gráfica vw/ vhpueden ser una opción, ya que funciona de manera similar (sensible).
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 en base a un comentario.
Si es imprescindible un cuadrado y no se pueden usar unidades de ventana gráfica o secuencias de comandos, aquí hay otro truco para usar una imagen ficticia.
Tenga en cuenta que, como imagen, también se podría utilizar un SVG o Base64 para datauriahorrar un viaje de ida y vuelta adicional 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>