Website rendering issue on Safari

While it still needs to be supported, it's been my experience that IE11 and Safari fight for the title of worst standards compliant browser. Good luck with the ping-pong of fixing shit for safari only having it break everything else.

You can do somewhat decent testing with some hackintosh vms... but yeah, getting ahold of an actual Mac is going to be the best way, but also it seems Safari 10 (~2 years old-ish, has very different behavior to the latest version, so you'll probably need an older version to hold back updates on)

Safari doesn't make it easy to test compatibility :/

Edit: My best guess is likely support for display: grid, it's based on the same standards as flex but is much newer, and has many edge cases. Even flex has strange behaviors with measuring on safari still.

With regards to the List of groups, flex-direction: column is notoriously poorly supported across many browsers. It has a lot to do with the way that the web was originally built (i.e. height is a product of width & layout). It sounds strange as fuck but you actually will find you have a lot more luck using:

.container {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

.container > * {
  flex: 1 0 100%; 
  // Sometimes 100% causes problems too, often any 
  // value > 50% will yield the result of pushing the next
  // item to the next row
}

It's dirty, but it has fewer edge cases... or just use display: block if you don't need any of flex's specific layouting like order changes or alignment.