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

Question

我们有以下布局：

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

scss看起来像这样：

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

        .red-container {
            flex: 1;
        }

        .blue-container {
            // Nothing
        }
    }

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

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

我创建了git repo以解决问题

知道可能是什么问题吗？

Answer 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
    }
}