Flexbox isn't lining up boxes properly in Safari

Question

I am trying to create a two column layout using flex. Here's a codepen showing what I currently have. It works just like I want it to in Chrome and Firefox. However, in Safari, each div expands to fill the whole whole window, and the second wraps so that it's one on top of the other. I want them both next to each other.

TL;DR: Code/demo are here. Works in Chrome, Firefox. Doesn't work in Safari.

Answer 1

Ok, I fixed it. The issue is that Safari needs a vendor-specific prefix for it to work. So if I add a display: -webkit-flex; to the flexbox and a -webkit-flex: auto; to each of the divs, it works as intended. Dontcha just love CSS browser support?

Here's a working codepen.