显示：flex 不工作答案

【问题标题】：Display:flex is not working显示：flex 不工作
【发布时间】：2018-11-09 14:33:30
【问题描述】：

我用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>

我找到了一些关于此的问答，但没有一个有效。

【问题讨论】：

“我找到了一些关于此的问答，但没有一个有效。” - 请你告诉我们什么没用？
您是否尝试过从autoprefixer.github.io 添加供应商前缀？
您能否在 id "team-messageid" 中添加一些数据。在我的 Firefox 浏览器中也可以使用多个段落。
请添加在您的 HTML 中加载的实际数据，而不是关于动态数据的评论。 flex-direction: column-reverse; 在 Firefox 中非常适合我，并且自推出以来一直如此。
@Fokrule 如果它在 sn-p 中工作，但不在您的站点上，那么您的演示范围缩小了太多。您需要在此处从您的站点将更多代码添加到您的演示中，直到您可以通过 Stack Snippet 在 Chrome 中重现它。

标签： css firefox flexbox

【解决方案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 */
}

【讨论】：