css - 显示:flex不起作用

我用display:flex和flex-direction: column-reverse;创建了一个div。
它在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>

我已经找到了一些有关此问题的问答，但它们都没有起作用。

最佳答案

问题是您尚未确定它定向到哪个浏览器。这就是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 */
}

关于css - 显示:flex不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50609726/