Question

下面的图表适用于Chrome和Firefox，但Safari缩小了广告框的宽度。这也发生在移动客户端上。我包括图表容器的css和完整标记和css的编解码器。

#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会自动设置为1 0 auto，这是说flex-grow: 1; flex-shrink: 0; flex-basis: auto;的缩写。 flex-shrink: 0;应该可以防止框缩小，但似乎safari不会自动设置此属性。只需在flex项目上将flex-shrink设置为0，它们就不会再缩小了。

Flexbox无法在Safari 9.1.1上运行

1 个答案: