If you mean Safari 5.1.7 on Windows then that was discontinued and support dropped about 8 years ago long before flexbox was even thought of so is not surprising it doesn’t work properly.
If the float:left was an attempt at a fallback for older browsers then if you remove the flex properties you will see that the columns do not go side by side at widths less than about 1300px because you have made them too wide 27.1% + 72% + 12px = ????
Remove the px side padding and use a suitable percent or use the box-sizing:border-box model to avoid the boxes getting bigger.
If you are indeed using Safari on Windows then I suggest that you uninstall it immediately as any unsupported browser is a high security risk these days. testing safari on windows is futile anyway because it does not represent normal safari on the mac any more and would be a waste of time to test against. There’s only a couple of misguided developers using it anyway :).