Дисплей: Flex не работает

Question

Я создал div с display:flex и flex-direction: column-reverse;.Он отлично работает на Chrome, но в Firefox display:flex не работает.

#team-messageid 
{
   height: 350px;
   overflow: auto;
   display: flex;
   flex-direction: column-reverse;
}

<div id="team-messageid">
    <div id="single-message;" style="background-color: #E8E8E8;border-radius:15px;margin-right: 24px;margin-left:24px;margin-bottom:1%;border-top-right-radius:0px;">
        <div><span class="single-message" style="font-size:19px;float:right;padding: 1%;">Div 1</span><br></div>
    </div>
    <div id="single-message;" style="background-color: #E8E8E8;border-radius:15px;margin-right: 24px;margin-left:24px;margin-bottom:1%;border-top-right-radius:0px;">
        <div><span class="single-message" style="font-size:19px;float:right;padding: 1%;">Div 2</span><br></div>
    </div>
    <div id="single-message;" style="background-color: #E8E8E8;border-radius:15px;margin-right: 24px;margin-left:24px;margin-bottom:1%;border-top-right-radius:0px;">
        <div><span class="single-message" style="font-size:19px;float:right;padding: 1%;">Div 3</span><br></div>
    </div>
    <div id="single-message;" style="background-color: #E8E8E8;border-radius:15px;margin-right: 24px;margin-left:24px;margin-bottom:1%;border-top-right-radius:0px;">
        <div><span class="single-message" style="font-size:19px;float:right;padding: 1%;">Div 4</span><br></div>
    </div>
    <div id="single-message;" style="background-color: #E8E8E8;border-radius:15px;margin-right: 24px;margin-left:24px;margin-bottom:1%;border-top-right-radius:0px;">
        <div><span class="single-message" style="font-size:19px;float:right;padding: 1%;">Div 5</span><br></div>
    </div>
    <div id="single-message;" style="background-color: #E8E8E8;border-radius:15px;margin-right: 24px;margin-left:24px;margin-bottom:1%;border-top-right-radius:0px;">
        <div><span class="single-message" style="font-size:19px;float:right;padding: 1%;">Div 6</span><br></div>
    </div>
</div>

Я нашел несколько вопросов и ответов по этому поводу, но ни один из них не работает.

Answer 1

Проблема в том, что вы не определили, на какой браузер он ориентирован.Вот как должен выглядеть CSS-код.

#team-messageid {
   height: 350px;
   overflow: auto;
   display: flex;
   flex-direction: column-reverse;
   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;      /* TWEENER - IE 10 */
   display: -webkit-flex;     /* NEW - Chrome */
}