Since upgrading to Safari 10.1.1 and macOS Sierra, I have encountered an issue where column wrap no longer functions properly with a list of items that have a minimum width set. I have tried adjusting various flex properties on the child elements, but Safari does not seem to be able to wrap them in columns once this is implemented. This functionality is still working in the other browsers I need to support and was functional in version 10.0.1 of Safari. To better illustrate the issue, I have created a CodePen simulation depicting the current code on the site - http://codepen.io/ssanders/pen/KmJgwK
It is important to note that you must have the following:
*Safari- Version 10.1.1
*macOS - Sierra
.list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
height: 600px;
}
.item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 48%;
margin-top: 25px;
min-width: 340px;
}