Прокладка-нижняя/верхняя часть в макете 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>

Ответы

Ответ 1

Обновление апрель 2016

(все еще действует в мае 2017 года)

Спецификации были обновлены до:

Процентные поля и прокладки на гибких элементах могут быть разрешены либо:

их собственная ось (разрешение влево/вправо разрешено по ширине, верхнее/нижнее разрешение против высоты) или

встроенная ось (левая/правая/верхняя/нижняя часть всех разрешает по ширине)

источник: Модуль гибкого модульного модуля CSS Уровень 1

Это означает, что chrome IE FF и Edge (даже если они не имеют такого же поведения) следуют рекомендациям specs.

Спекуляции также говорят:

Авторы должны избегать использования процентов в прокладках или полях на гибких полностью, так как они будут иметь разное поведение в разных браузеры. [источник]

Работа вокруг:

Вы можете обернуть первый дочерний элемент контейнера 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>

Ответ 2

Принятый ответ правильный, но я улучшил решение, используя псевдоэлемент вместо добавления нового элемента в 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 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%;
}

Ответ 3

Я использовал vh вместо% отлично работал в Safari, Firefox и Edge

Ответ 4

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