Прокладка знизу / зверху у макеті flexbox

У мене є макет flexbox, що містить два елементи. Один з них використовує padding-bottom :

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

Синій елемент зберігає співвідношення сторін відповідно до ширини, коли розмір сторінки змінюється. Це працює з Chrome і IE і виглядає так:

Однак у Firefox та Edge я отримую наступне (це ігнорування відступів на синьому полі, що і підтримує співвідношення сторін):

Я занадто новачок у flexbox, щоб по-справжньому зрозуміти, чи має це працювати, чи ні. Вся суть flexbox полягає в тому, щоб змінити розмір речей, але я не впевнений, чому він ігнорує внутрішню підкладку і ставить абсолютні розміри на синій елемент.

Я думаю, в кінцевому підсумку я навіть не впевнений, чи правильно Firefox чи Chrome роблять! Чи можуть допомогти будь-які експерти Flexbox від Firefox?

Оновлення вересня 2020 року

FireFox та edge реалізували поведінку за специфікаціями, а margin + padding для елементів flex розраховуються відповідно до ширини блоку, що містить.
Так само, як елементи блоку.

Оновлення лютого 2018 року

Firefox та edge домовились змінити свою поведінку на верхньому, нижньому полі та відступі для елементів flex (та сітки):

[...], наприклад, відсотки ліворуч / праворуч / зверху / знизу всі роздільні за розмірами, що містять ширину блоку, у горизонтальних режимах запису. [ джерело ]

Це ще не реалізовано (протестовано на FF 58.0.2).

Оновлення квітня 2016 р

( продовжує діяти у травні 2017 року )

Характеристики оновлено до:

Відсотки полів та відступів для гнучких елементів можна вирішити щодо:

• власну вісь (відсотки ліворуч / праворуч вирішуються щодо ширини, верхнє / нижнє - щодо висоти), або,
• вбудована вісь (відсотки ліворуч / праворуч / зверху / знизу - усі роздільні за шириною)

джерело: CSS Модуль гнучкого розміщення коробки Рівень 1

Це означає, що chrome IE FF та Edge (навіть якщо вони не мають однакової поведінки) відповідають рекомендаціям специфікацій.

Технічні характеристики також говорять:

Авторам слід уникати використання відсотків у відступах або полях для елементів flex, оскільки вони матимуть різну поведінку в різних браузерах. [ джерело ]

Попрацюйте:

Ви можете обернути першу дочірню частину флекс-контейнера іншим елементом і надіти padding-bottom другу:

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

Я перевірив це в сучасних браузерах (IE, chrome, FF та Edge), і всі вони мають однакову поведінку. Оскільки конфігурація другої дочірньої дитини є "такою ж, як зазвичай", я припускаю, що старіші браузери (які також підтримують модуль макета flexbox ) відображатимуть той самий макет.

Попередня відповідь:

Відповідно до специфікацій , Firefox має правильну поведінку

Пояснення:

На відміну від елементів блоку, які обчислюють свій% поля / заповнення відповідно до ширини контейнерів, для елементів flex:

Відсоткові поля та відступи на гнучких елементах завжди визначаються відповідно до їх відповідних розмірів; на відміну від блоків, вони не завжди вирішують проти вбудованої розмірності їх блоку, що містить.

джерело dev.w3.org

Це означає, що padding-bottom / top та margin-bottom / top обчислюються відповідно до висоти контейнера, а не ширини, як у макетах non-flexbox.

Оскільки ви не вказали жодної висоти для елемента батьківського гнучкого елемента, нижнє заповнення дочірнього елемента має становити 0px.
Ось скрипка з фіксованою висотою на батьківщині, яка показує, що дно прокладки обчислюється відповідно до висоти display:flex;контейнера.

Прийнята відповідь правильна, але я покращив рішення, використовуючи псевдоелемент замість того, щоб додавати новий елемент до HTML.

Приклад: 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%;
}

Я використовував vh замість%, що чудово працював у Safari, Firefox & Edge

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