柔性盒在Safari中不工作

Question

這太令人沮喪了。我已經嘗試了數十個「修復」，我希望有人能夠提供幫助。我有一個在Chrome和IE中運行良好的Flexbox，但不支持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> 

這裏是所需的外觀（從Chrome中）：

下面是它看起來像在Safari：

Answer 1

這是我的修復，我不是100％高興。看起來Safari沒有固定的寬度工作，所以Flexbox沒有真正的響應。我發現130px的寬度在所有瀏覽器上都有3列。

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