Flexbox 在 Safari 中不堆叠答案

【问题标题】：Flexbox not stacking in SafariFlexbox 在 Safari 中不堆叠
【发布时间】：2017-03-14 14:10:17
【问题描述】：

在 Safari 中让我的 Flexbox 切片在断点处堆叠时遇到了一些麻烦（为此目的 v10.0）。这是一个示例codepen，展示了我正在尝试做的事情。

这里已经有很多关于同一主题的 Q/A，但我还没有找到解决我的具体问题的解决方案。我已经使用供应商前缀和没有供应商前缀进行了测试。删除 calc() 和 min-width 属性！是别的吗？这是我正在尝试做的事情的要点......

.tile-container
   display: flex
   flex-wrap: wrap

.tile
   flex: 1
   margin: 3px
   padding: 2rem
   min-width: calc(25% - 0.75rem)
   min-height: 200px
   text-align: center
   color: #fff
   background: tomato

.tile-icon
   width: 100%
   max-width: 50px

.tile-title
   display: block
   padding-top: 10px

.tile-content
   margin-top: 30px

@media (max-width: 768px)
.tile
   width: 50%
   min-width: calc(50% - 0.75rem)
@media (max-width: 480px)
.tile
   min-width: calc(50% - 0.75rem)
@media (max-width: 380px)
.tile
   min-width: 100%

...项目应在较小的屏幕上垂直堆叠，并在较大的屏幕上水平放置。但是，在 Safari 中，它始终是水平的，从不堆叠（调整浏览器大小时）。

我可以提供后备选项，但我真的很想帮助调查我可能会出错的地方。有人可以帮我理解我可能忽略了什么吗？

【问题讨论】：

标签： css html safari sass flexbox

【解决方案1】：

所以在尝试了更多之后，我似乎找到了自己的答案......

似乎有效的解决方案是 flex: 1 而不是我能够做到 flex: 1 0 calc(25% - 0.75rem) 并且结果符合预期。

希望这对您将来有所帮助

【讨论】：