Flex-Box funktioniert nicht in Safari

Question

Das ist so frustrierend. Ich habe versucht, Dutzende von "Fixes" Ich hoffe, dass jemand helfen kann. Ich habe eine Flexbox, die gut in Chrome und IE funktioniert, aber nicht Safari (iOS und Desktop).

Die 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; 
} 

Die HTML:

<ul class="resulist40"> 
      <li class="reslist40"> 
       <a onclick="dovid(1);">Day 1</a> 
      </li> 
      <li class="reslist40"> 
      </li>... 
</ul> 

Hier ist die gewünschte Aussehen (aus Chrom):

Hier ist, wie es in Safari aussieht:

Answer 1

Das ist meine Lösung, ich bin nicht 100% glücklich. Es scheint, dass Safari ohne feste Breite nicht funktioniert - die Flexbox reagiert also nicht wirklich. Ich habe festgestellt, dass eine Breite von 130px mir 3 Spalten in allen Browsern gibt.

.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; 
}