Flexbox无法在Safari 9.1.1上运行

Question

下面的图表适用于Chrome和Firefox,但Safari正在缩小框的宽度.这也发生在移动客户端上.我包括图表容器的css和完整标记和css的codepen.

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 不是 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,它们就不会再缩小了.