Flexbox 在 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

更新

尽管我很喜欢我随机获得的赞成票，但我意识到我在原来的帖子中犯了一个很大的错误。默认的 flex 值为 0 1 auto not 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-shrink 设置为 0，它们就不会再收缩了。