Почему не влияет процентная нагрузка / маржа на элементы Flex в Firefox и Edge?

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

.outer { display: flex; width: 100%; background: blue; } .inner { width: 50%; background: yellow; padding-bottom: 50%; } 
  

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

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

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

Обновление 2018 года

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

4.2. Положения маржи и прокладки Flex

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


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

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

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

Вот еще несколько:

4.2. Положения маржи и прокладки Flex

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

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

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

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

В дополнение к ответу Майкла_Б , вот возможное обходное решение.

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

Фрагмент стека

 .outer { display: flex; width: 100%; background: blue; } .inner { width: 50%; background: yellow; padding-bottom: 50vw; } 
  
  • Элемент оформления текста OPTION
  • Горячие клавиши Vim для конкретного файла
  • Отправлять HTML-письмо в формате PNG
  • Квадрат DIV, где высота равна области просмотра
  • Как предотвратить автоматическое заполнение роботами формы?
  • Как выбрать гиперссылку в виде текста в браузере?
  • Файл открывается вместо загрузки в Internet Explorer в href-ссылке
  • Изменение цвета всплывающей подсказки
  • Как добавить элемент в DOM и выполнить его код?
  • Как изменить программу по умолчанию, используемую Outlook 2010 для отображения источника электронной почты?
  • Что такое хорошие экстракторы ссылок?
  • Давайте будем гением компьютера.