Flexbox无法在Safari 9.1.1上工作

下面的图表适用于Chrome和Firefox，但Safari正在缩小框的宽度。这也发生在移动客户端上。我包括图表容器的css和完整的标记和css的代码。Flexbox无法在Safari 9.1.1上工作

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

我会很感激任何人可能有的提示！感谢

来源

2016-07-06 Juan

谢谢@Michael_B！ – Juan

更新

虽然我爱我已经得到随机的upvotes多，我已经意识到我在原来的岗位上做出了一个相当大的错误。默认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，它们就不会再缩小。

来源

2016-07-06 18:28:03 Cameron637

嗨Cameron637，我试着添加这些属性，但它没有奏效。谢谢你的提示！ – Juan

对我来说，它最初也不起作用。我有一个'.container'，它是flex的，然后是一个带有'img'的div，在右边被截断（在Safari 9.1.1中，但不是Chrome或Firefox或Opera）。为'img'的样式添加'flex-shrink：0'没有修复它。但是，在'div'中加入'flex-shrink：0'来包装'img' _did_来修复它。 – Purplejacket

注意：另请参阅：https：//github.com/philipwalton/flexbugs – Purplejacket

Flexbox无法在Safari 9.1.1上工作

回答

相关问题