显示：flex 不工作

Question

我创建了一个 divdisplay:flex和flex-direction: column-reverse;。它在 Chrome 上运行良好，但在 Firefoxdisplay: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 */
}