Safari 中的 Flexbox 问题（底部对齐的项目）答案

【问题标题】：Problems with Flexbox in Safari (Bottom aligned items)Safari 中的 Flexbox 问题（底部对齐的项目）
【发布时间】：2017-01-06 10:19:04
【问题描述】：

我们有以下布局：

布局显示列表（蓝色容器）顶部对齐，但我们需要使列表底部对齐。我们通过制作容器（橙色）flex 来实现这一点，然后我们制作了红色容器 flex: 1，但它在 Safari 中不起作用。

scss 看起来像这样：

    .orange-container {
        display: flex;
        flex-direction: column;

        .red-container {
            flex: 1;
        }

        .blue-container {
            // Nothing
        }
    }

在 Safari 中，当列表增长时，它会与红色容器及其上方的容器（白色框）重叠。

我们已经尝试将 -webkit 供应商添加到我们的 flex 属性中，但没有任何改变。

我创建了一个git repo 来说明问题

知道可能是什么问题吗？

【问题讨论】：

什么 safari 版本？
9.1.2（埃尔卡皮坦）
您是否使用任何其他声明，例如 min-width 等？如果是这样，请发布所有内容。我会尝试在我的环境中复制它。
不，实际上就是这样
很难用如此有限的代码来判断。 HTML 是什么样的？您是否尝试过 justify-content: space-between 在容器上？请发布足够的代码来重现问题。另外，您的布局是否适用于其他浏览器？

标签： css safari sass flexbox ionic2

【解决方案1】：

我通过以下操作找到了解决方案：

.orange-container {
    display: flex;
    flex-direction: column;

    .red-container {
        flex-grow: 1;
    }

    .blue-container {
        flex-shrink: 10;
    }
}

flex-grow 提供了帮助，但没有解决 Safari 中的问题。在 Chrome 和 IE 中一切都很好，但在 Safari 中，项目缺少空格，这使得项目彼此非常接近，所以我用flex-shrink: 10 解决了这个问题。

如果这是最好的解决方案，我不知道，但它解决了 Safari 的问题。我希望我仍然可以得到这方面的任何反馈。

编辑：

所以在进行了更多研究后，我发现，我可以将flex-schrink: 0 用于那些我不想被列表弄乱的容器，结果如下：

.orange-container {
    display: flex;
    flex-direction: column;

    .white-container {
        flex-schrink: 0;
    }

    .red-container {
        flex-shrink: 0
        flex-grow: 1;
    }

    .blue-container {
        // Nothing
    }
}

【讨论】：