Safari에서 플렉스 박스가 작동하지 않습니다.

Question

이것은 실망 스럽습니다. 나는 누군가가 도울 수 있기를 희망하는 수십 개의 "수정"을 시도했다. 크롬과 IE에서는 잘 작동하는 플렉스 박스가 있지만 Safari에서는 작동하지 않습니다 (iOS 및 데스크톱).

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

html로 :

여기

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

이 (크롬)에서 원하는 모양입니다 : 여기

은 사파리의 모습입니다 :

Answer 1

이것은 제 수정 사항입니다. 저는 100 % 행복하지 않습니다. Safari는 고정 너비가 없어도 잘 작동하지 않는 것 같습니다. 그래서 flexbox는 실제로 반응이 없습니다. 130px의 너비는 모든 브라우저에서 3 cols를 제공한다는 것을 알았습니다.

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