Элементы Flex игнорируют процент заполнения в Firefox.

Я пытаюсь добавить дополнение к элементу внутри элемента display:flex. Когда заполнение определяется как процент, оно не отображается в Firefox, хотя оно выполняется, если определено в px. Оба случая работают как ожидается в Chrome.

div {
    background: #233540;
}
div > div {
    color: #80A1B6;
}
.parent {
    display: flex;
}
.padded {
    padding-bottom: 10%;
}
<div class="parent">
    <div class="padded">
        asdf
    </div>
</div>

Ответы

Ответ 1

См. https://lists.w3.org/Archives/Public/www-style/2015Sep/0038.html

Процент сетки/гибкости

  • Группа попыталась проработать, как вертикальные процентные поля   и paddings.
    • Примечание. Верхний и нижний поля в CSS традиционно   разрешено против ширины содержащего блока вместо ее   высота, которая имеет некоторые полезные эффекты, но, как правило,   удивительно. Конечно, существующие режимы макета должны быть продолжены   для этого.
    • Предыдущее групповое разрешение было для варианта 2 (ниже), но   Google почувствовал, что у них появилась новая информация относительно abspos   поведение, которое заслуживает пересмотра.
    • Обсуждение сводилось к трем потенциальным решениям:
      • Вариант 1. Всегда разрешайте проценты против ширины.
      • Вариант 2: Решетка и гибкость разрешают по высоте, и           элементы abspos всегда разрешаются по ширине.
      • Вариант 3: Сетка и гибкость, включая их элементы abspos,           решите против высоты. Абсолют в другом месте           продолжать разрешать ширину.
    • В соломенном опросе группа была довольно равномерно распределена между   варианты 1 и 3.
    • Microsoft возразит против варианта 1 и Google на вариант 3,   поэтому обсуждение зашло в тупик и будет продолжено   в частном порядке во время F2F в надежде прийти к заключению.

См. https://lists.w3.org/Archives/Public/www-style/2015Sep/0113.html,

Flexbox% Follow-Up

  • [...] не было никакого вывода.

Текущий Flexbox spec предупреждает об этом:

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

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

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

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

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

Ответ 2

Для меня это делает трюк: добавление display: table в div. Не знаю, вызвало ли это другие проблемы. 

    div {
        background: #233540;
        display: table;
    }
    div > div {
        color: #80A1B6;
    }
    .parent {
        display: flex;
    }
    .padded {
        padding-bottom: 10%;
    }
    <div class="parent">
        <div class="padded">
            asdf
        </div>
    </div>

Ответ 3

Попробуйте следующее:

.padded {
    padding-bottom: 10vw;
}