How can I make Flexbox work properly in safari 10

Question

I've been working on a website, now I got the feedback that it doesn't look like it's supposed to. I'm using flexbox and the problem occurs in Safari 10. I know this is an old browser, but according to http://caniuse.com/#search=flex it should be supported.

The problem occurs on the following page https://hollandcircularhotspot.nl/en/cases

I've searched entire stack overflow for the answers. I think I'm using the right prefixes, I'm not using a minimum width (which is a known issue).

The problem only occurs on safari 10 (as far as I am aware of)

This is how it looks on safari 10 https://i.stack.imgur.com/qTyqT.jpg And this is how it is supposed to look like https://i.stack.imgur.com/WdcDh.jpg

Can we see your code? have a look at here [CLICK ME](https://stackoverflow.com/questions/36636243/flex-items-not-stacking-properly-in-safari) — Baransel A., Dec 20 '18 at 11:09
you have to use display: flex; the property in the main class. — Arshiya Khanam, Dec 20 '18 at 11:11

score 0 · Answer 1 · answered Dec 20 '18 at 11:11

0

If you are using flexbox you can use justify-content: on the parent div and you can drop all of the media-queries that seem to be causing the problem.

answered Dec 20 '18 at 11:11

Robby

3
1
3

score 0 · Accepted Answer · answered Dec 20 '18 at 11:11

try to change max-width to the width

.blocks-links .block-link, .blocks-links .block-link-big {
    color: #6F6F6F;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 21rem;
    /*max-width: 21rem;*/
    background-color: #fff;
    -webkit-box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.16);
    margin-bottom: 3rem;
    margin-right: 5rem;
}

Thank you, this solved my problem! – Mike Hendriks Dec 20 '18 at 12:35 — Mike Hendriks, Dec 20 '18 at 12:35

score 0 · Answer 3 · answered Dec 20 '18 at 11:29

0

Try this one

wrapper {
 display: flex;
 justify-content: center;
 text-align: center;
}

answered Dec 20 '18 at 11:29

Arshiya Khanam

613
6
12

How can I make Flexbox work properly in safari 10

3 Answers3