Safari 9.1.1でフレックスボックスが動作しない

Question

下記の図はChromeとFirefoxで動作しますが、Safariはボックスの幅を縮小しています。これはモバイルクライアントでも起こります。私はチャートコンテナのためのCSSと完全なマークアップとCSSへのコードペインを含めています。

https://codepen.io/juancho1/pen/akyNmp

#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に関するいくつかの問題があり、私が見たソリューションのほとんどを試してみた。それは屈曲方向に関連していてもよい。

誰かが持っている可能性のあるヒントをありがとうございます。 おかげ

Answer 1

更新

は同じくらい私がランダムになってきたupvotesを愛するように、私は私のオリジナルのポストに非常に大きなミスを犯して実現しました。デフォルトのflexの値は0 1 autoではなく、1 0 autoです。しかし、これは、flex-shrinkを0に設定すると、フレックスアイテムが縮小しないようにする理由の背後にある理由を追加するだけで、すべてのブラウザで縮小していない理由を説明できません。私は前にこの問題に遭遇しました

オリジナルポスト

。他のほとんどのブラウザでは、flexは自動的に1 0 autoに設定され、flex-grow: 1;flex-shrink: 0;flex-basis: auto;の略です。 flex-shrink: 0;はボックスの縮小を防ぎますが、Safariは自動的にこのプロパティを設定しません。フレックスアイテムでフレックスシュリンクを0に設定するだけで、それ以上は収縮しません。