1

(English is not my native language, sorry)

I'm using flexboxes on Bootstrap 3 to put the same height on my columns. Unfortunately it doesn't seem to work properly on Safari and Chrome 43 the last column is automatically on a second row for those browsers...

The others posted questions don't treat about this specification neither on Safari 9.1 (OSX) nor on Chrome 43 (OSX). It works fine on latest Chrome version.

I tried to add all prefixes but it doesn't seem to work.

How can I fix that?

Demo : Bootply

Screen on Safari 9.1 (OSX) [bugged]

safari flexbox bug 1 safari flexbox bug 2

Screenshot on Firefox [not bugged]

firefox flexbox no-bug firefox flexbox no-bug 2

Thank you <3

EDIT (22/05/2016)

If i change the flex in CSS it "works" but it doesn't respect the Bootstrap grid system anymore on any browser...

.row-flex-accueil, .row-flex-accueil > div[class*='col-'] {  
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -webkit-box-flex: 1 1 23em; /* this */
            -webkit-flex: 1 1 23em; /* this */
                -ms-flex: 1 1 23em; /* this */
                    flex: 1 1 23em; /* this */

        -webkit-box-pack: center;

        -ms-flex-pack: center;

                justify-content: center;
        -webkit-justify-content: center;

        -webkit-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
}

Screenshot on Safari (or any browser) : 1920*1200

safari update

Screenshot on Safari (or any browser) : ~1200*1200

safari little bug

It's due to the 23em in flex (If I'm right it's like a min-width) but i don't know how to change this...

Pierrou
  • 303
  • 3
  • 21
  • 2
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. Although you have provided a [**link to an example or site**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. – Paulie_D May 20 '16 at 11:36
  • I cut all the unnecessary code to put it on Bootply. This is a problem with blocks and it can be something inside it. – Pierrou May 20 '16 at 11:41
  • 1
    This question is not a duplicate ! Tell me where you see "Safari" and "Chrome v43" in the post you linked. I already asked for flexboxes : http://stackoverflow.com/questions/37301187/centering-columns-in-flexbox but now it's a problem for Safari and Chrome v43. Stop editing without taking the time to read and to understand the question. – Pierrou May 20 '16 at 12:03
  • Your question was read. But apparently it was misinterpreted. Like you said, your English is not entirely clear. No need to get angry. I'll re-open. – Michael Benjamin May 20 '16 at 12:30
  • But it may be closed again for not adhering to the guidelines. You should post enough code to reproduce the problem. http://stackoverflow.com/help/how-to-ask – Michael Benjamin May 20 '16 at 12:31
  • Thank you and sorry for that. I added screenshots to improve the comprehension. Unfortunately, i can't post less code... It's blocks and it might be something into it... I understand there's many css but i already delete all the unnecessary code. – Pierrou May 20 '16 at 12:36

0 Answers0