Flex-box not working in Safari - html

Question

This is SO frustrating. I have tried dozens of "fixes" I am hoping someone can help. I have a flexbox that works well in Chrome and IE, but not Safari (iOS and desktop).
The CSS:
.resulist40 {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
float:clear;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 350px;
width: initial;
}
.reslist40 {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-height: 34px;
}
The HTML:
<ul class="resulist40">
<li class="reslist40">
<a onclick="dovid(1);">Day 1</a>
</li>
<li class="reslist40">
</li>...
</ul>
Here is the desired look (from CHROME):
Here is what it looks like in Safari:

Answer 1

This is my fix, I am not 100% happy. It seems that Safari dosen't work well without having a fixed width - so the flexbox is not really responsive. I found that a width of 130px gives me 3 cols on all browsers.
.resulist40 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
padding-left: 10px;
}
.reslist40 {
list-style: none;
display: inline-block;
width: 130px;
height: 34px;
text-align: left;
}

Answer 2

Don't mind me as I dig up this post. I had a similar
misfortune recently but in my case I had...
img {
height: auto;
width: 100%;
}
and Safari was not having it. So I changed it to...
img {
height: 100%;
width: 100%;
}
which made Safari happy again.