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