Rembourrage bas / haut en agencement flexbox

J’ai une mise en page flexbox contenant deux éléments. L’un d’eux utilise le fond de remplissage :

#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%; /* insortingnsic aspect ratio */ height: 0; } 
 
Some text

L’élément bleu conserve son rapport d’aspect en fonction de sa largeur lorsque la page est redimensionnée. Cela fonctionne avec Chrome et IE et ressemble à:

fond de rembourrage en chrome et IE en agencement flexbox

Cependant, dans Firefox et Edge , j’obtiens les informations suivantes (en ignorant le remplissage de la zone bleue, ce qui permet de conserver les proportions):

fond de remplissage dans Firefox sur la mise en page Flexbox

Je suis trop novice pour comprendre si cela devrait ou ne devrait pas fonctionner. L’intérêt de flexbox est de redimensionner les choses, mais je ne sais pas pourquoi il ignore le remplissage insortingnsèque et place des tailles absolues sur l’élément bleu.

Je suppose que finalement je ne suis même pas sûr que Firefox ou Chrome fasse la bonne chose! Des experts en flexbox de Firefox peuvent-ils aider?

    Mise à jour février 2018

    Firefox et Edge ont accepté de modifier leur comportement sur les marges supérieure et inférieure et le remplissage des éléments flex (et de grid):

    Par exemple, les pourcentages gauche / droite / haut / bas sont tous résolus par rapport à la largeur de leur bloc contenant dans les modes d’écriture horizontale. [ source ]

    Ceci n’est pas encore implémenté (testé sur FF 58.0.2).

    Mise à jour avril 2016

    ( toujours valide en mai 2017 )

    Les spécifications ont été mises à jour pour:

    Les marges en pourcentage et les remplissages sur les articles flexibles peuvent être résolus par l’une des deux méthodes suivantes:

    • leur propre axe (les pourcentages gauche / droit se résolvent en fonction de la largeur, la résolution supérieure / inférieure en fonction de la hauteur), ou
    • l’axe en ligne (les pourcentages gauche / droit / haut / bas se résolvent tous en largeur)

    source: Module de mise en forme de boîte flexible CSS niveau 1

    Cela signifie que Chrome IE FF et Edge (même s’ils n’ont pas le même comportement) suivent les recommandations.

    Les spécifications disent aussi:

    Les auteurs doivent éviter d’utiliser des pourcentages dans les paddings ou les marges sur les éléments flex, car ils auront un comportement différent dans les différents navigateurs. [ source ]


    Solution de contournement :

    Vous pouvez envelopper le premier enfant du conteneur Flex dans un autre élément et placer le padding-bottom sur le deuxième enfant:

     #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%; /* insortingnsic aspect ratio */ } 
     
    Some text

    La réponse acceptée est correcte mais j’ai amélioré la solution en utilisant un pseudo-élément au lieu d’append un nouvel élément au code HTML.

    Exemple: 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; /* insortingnsic aspect ratio */ padding-bottom: 56.25%; height: 0; } #catsVideo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

    J’ai utilisé vh au lieu de% a parfaitement fonctionné dans Safari, Firefox et Edge

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