Display:flex is not working

Question

I have created a div with display:flex and flex-direction: column-reverse;. It is working fine on Chrome, but in Firefox display:flex is not working.

#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>

I have found some Q&As about this, but none of them are working.

"I have found some Q&As about this, but none of them are working." - Please could you tell us *what* didn't work? — AStopher, May 30 '18 at 16:44
Have you tried adding vendor prefixes from https://autoprefixer.github.io/? — Timothy Fisher, May 30 '18 at 16:45
could you add some data in id "team-messageid". having multiple paragraph works fine in my firefox browser aswell. — umanga shrestha, May 30 '18 at 16:54
Please add the actual data that is loaded in your HTML rather than a comment about dynamic data. `flex-direction: column-reverse;` works perfectly well for me in Firefox and has since it was introduced. — TylerH, May 30 '18 at 17:18
"I have found some Q&As about this, but none of them are working." Means . In stackoverflow I got an answer that says re order your css code . But have re ordered my css code. But those are not working. Here is the link https://stackoverflow.com/questions/37306138/flexbox-not-working-properly-on-firefox-but-okay-on-chrome-safari — Fokrule, May 30 '18 at 18:10
If I run this page from Firefox and then run snippet it worked fine. But in my working site it is not working. I am working on local. So I am unable to share where I am working — Fokrule, May 30 '18 at 18:15
@Fokrule If it is working in the snippet, but not on your site, then you have narrowed your demo down too much. You need to add more code into your demo here from your site until you can reproduce it here in Chrome via the Stack Snippet. — TylerH, May 30 '18 at 21:58

score 5 · Accepted Answer · answered May 30 '18 at 22:10

The problem is that you haven't identified what browser it is directed towards. This is what the css-code SHOULD look like.

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

Display:flex is not working

1 Answers1