Acolchado inferior / superior en el diseño de la caja flexible

Tengo un diseño de Flexbox que contiene dos elementos. Uno de ellos usa relleno de fondo :

#flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; border: 1px solid blue; padding-bottom: 56.25%; /* intrinsic aspect ratio */ height: 0; } 
 
Some text

El elemento azul mantiene su relación de aspecto de acuerdo con su ancho cuando se cambia el tamaño de la página. Esto funciona con Chrome e IE y se ve así:

fondo acolchado en cromo e IE en el diseño de la caja flexible

Sin embargo, en Firefox y Edge , obtengo lo siguiente (está ignorando el relleno en el cuadro azul, que es lo que mantiene la relación de aspecto):

relleno de fondo en Firefox en el diseño de Flexbox

Soy muy nuevo en flexbox para realmente entender si esto debería funcionar o no. El objective de flexbox es cambiar el tamaño de las cosas, pero no estoy seguro de por qué se está ignorando el relleno intrínseco, y poniendo tamaños absolutos en el elemento azul.

¡Creo que al final ni siquiera estoy seguro de si Firefox o Chrome están haciendo lo correcto! ¿Pueden ayudar los expertos de Firefox Flexbox?

Actualización febrero de 2018

Firefox y Edge acordaron cambiar su comportamiento en el margen superior, inferior y relleno para los artículos flexibles (y de cuadrícula):

[…] Por ejemplo, los porcentajes izquierdo / derecho / superior / inferior se resuelven contra el ancho de su bloque contenedor en los modos de escritura horizontal. [ fuente ]

Esto aún no está implementado (probado en FF 58.0.2).

Actualización abril 2016

( sigue siendo válido en mayo de 2017 )

Las especificaciones se han actualizado a:

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)

fuente: Módulo de diseño de caja flexible CSS Nivel 1

Esto significa que Chrome IE FF y Edge (incluso si no tienen el mismo comportamiento) siguen la recomendación de las especificaciones.

Las especificaciones también dicen:

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. [ fuente ]


Trabaja alrededor:

Puede envolver el primer elemento secundario del contenedor flexible en otro elemento y colocar el padding-bottom en el segundo elemento secundario:

 #flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; border: 1px solid blue; } #padding > div { padding-bottom: 56.25%; /* intrinsic aspect ratio */ } 
 
Some text

La respuesta aceptada es correcta, pero mejoré la solución utilizando un pseudo-elemento en lugar de agregar un nuevo elemento al HTML.

Ejemplo: http://jsfiddle.net/4q5c4ept/

HTML:

 
That's cool! This text is underneath the video in the HTML but above the video because of 'column-reverse' flex-direction.

CSS:

 #mainFlexbox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column-reverse; } #pnlText { border: 1px solid green; padding: .5em; } #videoPlaceholder { position: relative; margin: 1em 0; border: 1px solid blue; } #videoPlaceholder::after { content: ''; display: block; /* intrinsic aspect ratio */ padding-bottom: 56.25%; height: 0; } #catsVideo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

Utilicé vh en lugar de% funcionó perfectamente en Safari, Firefox y Edge

  
.flex-child{ height:100%; } .padd{ padding-top:100% /* write 100%, or instead your value*/; }