Flexbox無法在Safari 9.1.1上工作

下面的圖表適用於Chrome和Firefox，但Safari正在縮小框的寬度。這也發生在移動客戶端上。我包括圖表容器的css和完整的標記和css的代碼。Flexbox無法在Safari 9.1.1上工作

#chart-container{ 
    width: 100%; 
    height: auto; 
    border: 1px solid #39c3ec; 
    /*display: -webkit-box;*/ 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -moz-flex; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    overflow-x: scroll !important; 
}

我希望以前有人碰到過這樣的具體問題。在尋找可能的解決方案時，我看到Safari在flexbox方面存在一些問題，並嘗試了我見過的大多數解決方案。它也可能與彎曲方向有關。

我會很感激任何人可能有的提示！感謝

來源

2016-07-06 Juan

謝謝@Michael_B！ – Juan

更新

雖然我愛我已經得到隨機的upvotes多，我已經意識到我在原來的崗位上做出了一個相當大的錯誤。默認flex值是0 1 auto不是1 0 auto。然而，這隻會增加爲什麼設置flex-shrink到0會使flex項目不再縮小的原因，這只是無法解釋爲什麼它們不會在所有瀏覽器中縮小。

原貼

我以前就遇到了這個問題。在大多數其他瀏覽器上，flex會自動設置爲1 0 auto，這是簡稱flex-grow: 1;flex-shrink: 0;flex-basis: auto;。 flex-shrink: 0;應該防止盒子縮小，但它似乎safari不會自動設置此屬性。只需在Flex項目上將flex-shrink設置爲0，它們就不會再縮小。

來源

2016-07-06 18:28:03 Cameron637

嗨Cameron637，我試着添加這些屬性，但它沒有奏效。謝謝你的提示！ – Juan

對我來說，它最初也不起作用。我有一個'.container'，它是flex的，然後是一個帶有'img'的div，在右邊被截斷（在Safari 9.1.1中，但不是Chrome或Firefox或Opera）。爲'img'的樣式添加'flex-shrink：0'沒有修復它。但是，在'div'中加入'flex-shrink：0'來包裝'img' _did_來修復它。 – Purplejacket

注意：另請參閱：https：//github.com/philipwalton/flexbugs – Purplejacket

Flexbox無法在Safari 9.1.1上工作

回答

相關問題