Почему в Firefox и Edge не работают процентные отступы / отступы для гибких элементов?

Question

Я хочу иметь квадратный 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>

Это прекрасно работает в Chrome. Но в Firefox родитель сжимается до одной строки.

Как мне решить это в Firefox? Я использую версию 44.

Вы также можете просмотреть код по адресу https://jsbin.com/lakoxi/edit?html,css

Answer 1

2018 Обновление

Спецификация flexbox была обновлена.

4.2. Сгибание полей полей и прокладок

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

---

Оригинальный ответ - относится к версиям FF и Edge, выпущенным до 2018 года

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

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

Вот еще немного:

4.2. Сгибание полей полей и прокладок

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

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

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

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

Answer 2

В дополнение к ответу Michael_B, здесь возможен обходной путь.

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

---

Обновлено на основе комментария

Если квадрат является обязательным, и юниты или сценарии области просмотра не могут быть использованы, вот еще один трюк с использованием фиктивного изображения.

Обратите внимание, что в качестве изображения также можно использовать SVG или Base64 в качестве datauri чтобы сохранить дополнительную поездку на сервер

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
}
.inner img {
  display: block;
  width: 100%;
  visibility: hidden;
}

<div class="outer">
  <div class="inner">
    <img src="http://placehold.it/10" alt="">
  </div>
</div>