Почему в Firefox не работает процентное заполнение/маржа?

Я хочу иметь квадратный div внутри flexbox. Поэтому я использую:

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
  padding-bottom: 50%;
}
<div class="outer">
  <div class="inner">
    <a>hehe</a>
  </div>
</div>

Ответы

Ответ 1

Из flexbox спецификация:

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

Здесь еще несколько:

4.2. Поля атрибута и прокладки элемента

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

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

Пользовательский агент должен выбрать одно из этих двух типов поведения.

Примечание. Эта дисперсия засасывает, но точно отражает текущее состояние мира (нет консенсуса между реализациями и нет консенсуса в CSSWG). Это намерение CSSWG состоит в том, что браузеры будут сходиться по одному из вариантов поведения, после чего спецификация будет изменена.

Ответ 2

В дополнение к Michael_B answer, это возможное обходное решение.

При использовании процента мы часто связываем это с шириной окна просмотра, поэтому с учетом этого, единицы просмотра vw/vh могут быть опцией, так как она работает аналогично (отзывчива).

Фрагмент стопки

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
  padding-bottom: 50vw;
}
<div class="outer">
  <div class="inner">
    <a>hehe</a>
  </div>
</div>