css display flex not working properly on chrome and safari

Question

I used flexbox properties to make my section look like this:

It works fine on Chrome but I noticed a few differences when I checked firefox and safari.

This is how chrome looks like:

But on Firefox, I am not managing to apply to margin of 1% like I want as the red signal shows:

And on safari, the boxes are all one after the other:

It is a WordPress Site and not live yet. But here is my html structure:

    <section id="services">

        // here goes the title of the container

        <div class="main-container col-lg">  

               // here go all the box

         <div class="services-container">    

               // this one of the boxes              
         </div>
        </div>
    </section>

And the CSS:

#services {
    background-image: url("img/Services-background.jpg");
    background-color: red;
}
.col-lg {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: initial;
    max-width: 100%;
}
.services-container {
    color: #d6d6d6;
    margin: 1%;
    max-width: 100%;
    width: 30%;
}

How Can I make this work on all browsers?

Flexbox works fine in modern browsers. It's just new and some browsers require special attention. In this case, [**using a percentage margin is causing the problem**](http://stackoverflow.com/a/36783414/3597276). — Michael Benjamin, Sep 30 '16 at 23:55
For Safari, see [**Chrome / Safari not filling 100% height of flex parent**](http://stackoverflow.com/q/33636796/3597276) and [**Flexbox code working on all browsers except Safari. Why?**](http://stackoverflow.com/q/35137085/3597276). — Michael Benjamin, Sep 30 '16 at 23:57

score 4 · Answer 1 · answered Sep 30 '16 at 08:24

4

The best way to ensure that flex is working equally on all browsers is to use prefixes.

Here's the chart from MDN showing you the different browser prefixes available for flex box (and general browser support notices)

answered Sep 30 '16 at 08:24

pixeldesu

632
6
12

The link seems to jump around weirdly, just click on the _Browser compatibility_ link on the right sidebar to see the table with the prefixes. – pixeldesu Sep 30 '16 at 08:26

score 3 · Answer 2 · answered Sep 30 '16 at 09:31

3

 display: flex;
-webkit-display: flex;
-moz-display: flex;
-ms--display: flex;

answered Sep 30 '16 at 09:31

Shahzaib

57
4

score 1 · Accepted Answer · answered Sep 30 '16 at 09:24

1

I strongly suggest you not use flexbox, but floats instead. Delete all the flex properties your css should look like this:

#services{
    background-image: url(img/Services-background.jpg);
    overflow: auto;
}
.services-container {
    color: #d6d6d6;
    width: 30%;
    float: left;
    margin: 1%;
}

Then you can add the rest of the styling. It will work on all browsers.

answered Sep 30 '16 at 09:24

Elton Sousa

421
3
10

I am using float property and works on all browsers indeed.Appreciate – Sidney Sousa Sep 30 '16 at 09:43
Quick 2019 update , using flexbox in print css still behaves unpredictable – Matej Janovčík Oct 21 '19 at 00:51

score 1 · Answer 4 · edited Apr 03 '18 at 10:03

1

Sometimes the HTML version may be the reason (it was in my case):

I looked for <!DOCTYPE html> at the top of the source code. My HTML turned out to 4.0 something and that was the reason (most probably) that flex did not work. Once that was changed, it worked well.

Good luck...

edited Apr 03 '18 at 10:03

Eric Aya

69,473
35
181
253

answered Apr 03 '18 at 09:55

Aakash

21,375
7
100
81

css display flex not working properly on chrome and safari

4 Answers4