与Flexbox，就在Safari（底部对齐项目）的问题

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到ilustrate问题

任何想法可能是什么问题呢？

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