Почему в firefox не работает display:flex?

Question

[good_beginer]

Есть большой список который стролится. Появилась необходимость использовать display:flex; flex-direction: column-reverse;
Но в firefox эта штука не работает хотя по офф документации она есть... скролла просто нету, переписывал под все возможные варианты и безтолку. Может знает кто альтернативу? или почему не пашет?
https://codepen.io/myusernametest/pen/VErbeQ

.history{
    overflow:auto;
    max-width: 100%;
    margin-top: 10px;
    margin-left: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 5px;
    height: 390px;
    color: white;
    overflow-wrap: break-word;
    min-width: 300px;
    -webkit-display: flex;
    -webkit-flex-direction: column-reverse;
    -moz-display: flex;
    -moz-flex-direction: column-reverse;
    -ms-display: flex;
    -ms-flex-direction: column-reverse;
    -o-display: flex;
    -o-flex-direction: column-reverse;
    display:-webkit-flex;
    display: flex;
    flex-direction: column-reverse;
}

Comments

[Flying]

Из описания не очень понятно что это и как именно "не работает". Flexbox в Firefox работает прекрасно, так что проблема наверняка где-то в другом месте. Выложите минимальный пример на codepen.io, так будет проще разобраться

[good_beginer]

Flying, https://codepen.io/myusernametest/pen/VErbeQ

[good_beginer]

Flying, вот это чудо, скролл дива ( чёрный квадрат) нет в мозиле

[Сергей delphinpro]

воспользуйтесь дополнительным контейнером
https://codepen.io/anon/pen/aRVWKV?editors=1100

[good_beginer]

Сергей delphinpro, всё бы хорошо но результат уже другой, нужен реверс вместе с скроллом а он зараза не везьте поварачивается а тут нет :D

Answer 1

[Andrej Sharapov]

Вообще у вас что-то много всего.
По идее, этого должно быть достаточно:

.history
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow-x: hidden;
        flex-direction: column-reverse;

    min-width: 300px;
    max-width: 100%;
    height: 390px;
    margin-top: 10px;
    margin-left: 10px;
    padding: 5px;

    color: white;

    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
}

Comments

[good_beginer]

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

display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

Как по волшебству появляется scroll но уже не отображает как следует ... даже не знаю, в хроме и остальных, работает очень даже и вопрос с вёрсткой вроде бы отпадает но тогда почему глохнет в firefox

[Galdar Turin]

good_beginer, аналогичная проблема, нашёл решение??