Polsterung unten / oben im Flexbox-Layout

Ich habe ein Flexbox-Layout mit zwei Elementen. Einer von ihnen verwendet Polsterung unten :

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

<div id='flexBox'>
  <div id='padding'></div>
  <div id='text'>Some text</div>
</div>

Das blaue Element behält sein Seitenverhältnis entsprechend seiner Breite bei, wenn die Größe der Seite geändert wird. Dies funktioniert mit Chrome und IE und sieht folgendermaßen aus:

In Firefox und Edge wird jedoch Folgendes angezeigt (das Auffüllen der blauen Box wird ignoriert, wodurch das Seitenverhältnis beibehalten wird):

Ich bin zu neu in der Flexbox, um wirklich zu verstehen, ob dies funktionieren sollte oder nicht. Der springende Punkt bei Flexbox ist die Größenänderung, aber ich bin mir nicht sicher, warum die intrinsische Polsterung ignoriert und dem blauen Element absolute Größen zugewiesen werden.

Ich bin mir letztendlich nicht mal sicher, ob Firefox oder Chrome das Richtige tun! Können Firefox-Flexbox-Experten helfen?

Update September 2020

FireFox und edge haben das Verhalten aus den Spezifikationen implementiert, und Rand + Polsterung für Flex-Elemente werden beide entsprechend der Breite des enthaltenen Blocks berechnet .
Genau wie Blockelemente.

Update Februar 2018

Firefox und Edge haben vereinbart, ihr Verhalten am oberen, unteren Rand und an der Polsterung für Flex- (und Gitter-) Elemente zu ändern:

[...] zB werden die Prozentsätze für links / rechts / oben / unten im horizontalen Schreibmodus gegen die Breite des enthaltenen Blocks aufgelöst. [ Quelle ]

Dies ist noch nicht implementiert (getestet auf FF 58.0.2).

Update April 2016

( noch gültig im Mai 2017 )

Die Spezifikationen wurden aktualisiert auf:

Prozentuale Ränder und Polsterungen an flexiblen Elementen können gegen Folgendes aufgelöst werden:

• ihre eigene Achse (linke / rechte Prozentsätze werden gegen die Breite aufgelöst, obere / untere prozentuale Auflösung gegen die Höhe) oder
• die Inline-Achse (Prozentsätze links / rechts / oben / unten werden alle gegen die Breite aufgelöst)

Quelle: CSS Flexible Box Layout Modul Stufe 1

Dies bedeutet, dass Chrome IE FF und Edge (auch wenn sie nicht dasselbe Verhalten haben) den technischen Empfehlungen folgen.

Spezifikationen sagen auch:

Autoren sollten die Verwendung von Prozentsätzen in Auffüllungen oder Rändern für Flex-Elemente vollständig vermeiden, da sie in verschiedenen Browsern ein unterschiedliches Verhalten aufweisen. [ Quelle ]

Umgehen:

Sie können das erste untergeordnete Element des Flex-Containers in ein anderes Element einwickeln und padding-bottom das zweite untergeordnete Element hinzufügen:

#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 */
}

<div id='flexBox'>
  <div id='padding'><div></div></div>
  <div id='text'>Some text</div>
</div>

Ich habe dies in modernen Browsern (IE, Chrome, FF und Edge) getestet und sie haben alle das gleiche Verhalten. Da die Konfiguration des 2. untergeordneten Elements "wie gewohnt" ist, werden ältere Browser (die auch das Flexbox-Layoutmodul unterstützen) wahrscheinlich dasselbe Layout rendern.

Vorherige Antwort:

Gemäß den Spezifikationen hat Firefox das richtige Verhalten

Erklärung:

Im Gegensatz zu Blockelementen, die ihren prozentualen Rand / ihre Polsterung entsprechend der Behälterbreite berechnen, gilt für flexible Elemente:

Prozentuale Ränder und Polsterungen an flexiblen Elementen werden immer gegen ihre jeweiligen Abmessungen aufgelöst. Im Gegensatz zu Blöcken werden sie nicht immer anhand der Inline-Dimension ihres enthaltenen Blocks aufgelöst.

Quelle dev.w3.org

Dies bedeutet, dass Polsterung unten / oben und Rand unten / oben nach der Höhe des Containers und nicht nach der Breite wie bei Layouts ohne Flexbox berechnet werden.

Da Sie für das übergeordnete Flex-Element keine Höhe angegeben haben, sollte die untere Polsterung des untergeordneten Elements 0 Pixel betragen.
Hier ist eine Geige mit einer festen Höhe am Elternteil, die zeigt, dass der Polsterboden anhand der Höhe des display:flex;Behälters berechnet wird .

Die akzeptierte Antwort ist korrekt, aber ich habe die Lösung verbessert, indem ich ein Pseudoelement verwendet habe, anstatt dem HTML ein neues Element hinzuzufügen.

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

HTML:

<div id='mainFlexbox'>
  <div id='videoPlaceholder'>
    <iframe id='catsVideo' src="//www.youtube.com/embed/tntOCGkgt98?showinfo=0" frameborder="0" allowfullscreen></iframe>
  </div>
  <div id='pnlText'>That's cool! This text is underneath the video in the HTML but above the video because of 'column-reverse' flex-direction.    </div>
</div>

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

Ich habe vh anstelle von% verwendet und in Safari, Firefox & Edge perfekt funktioniert

    <div class="flex-parent">
      <div class="flexchild">
        <div class="pad"></div>
      </div>
    </div>  

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