Question

我创建了一个包含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>

我找到了一些Q＆amp;关于这一点，但它们都没有工作。

Answer 1

问题在于您还没有确定它所针对的浏览器。这就是css-code应该是什么样子。

#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 */
}

显示：flex无效

1 个答案: