Элементы 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;
}