Flexbox 在 Safari 9.1.1 上不起作用 [重复]

Posted 2023-03-07

【中文标题】Flexbox 在 Safari 9.1.1 上不起作用 [重复]

【英文标题】：Flexbox not working on Safari 9.1.1 [duplicate]

【发布时间】：2016-11-08 22:13:47

【问题描述】：

下面的图表适用于 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 方面存在一些问题，并尝试了我见过的大多数解决方案。它也可能与弯曲方向有关。

如果有人提供任何提示，我将不胜感激！ 谢谢

【参考方案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，它们就不会再收缩了。

【讨论】：

您好 Cameron637，我尝试添加这些属性，但没有奏效。感谢您的提示！

对我来说，它最初也不起作用。我有一个 .container，它是 flex，然后在其中一个 div 和一个在右侧被截断的 img（在 Safari 9.1.1 中，但不是 Chrome、Firefox 或 Opera）。将flex-shrink: 0 添加到img 的样式中并没有解决它。但是将 flex-shrink: 0 添加到 div 包装 img did 修复它。

注意：另见：github.com/philipwalton/flexbugs