如何在Safari中的flexbox列中获取全高度嵌套容器

Question

我有一个代码库，突出了我遇到的问题：

http://codepen.io/heaversm/pen/rrANWX

我在容器内有四列，显示：flex。列从Bootstrap 3接收它们的样式。在这些列中是一个具有背景颜色的嵌套容器。我希望嵌套容器填充父（列）容器的高度，但它在Safari 10中不起作用。

为了让它填写其他浏览器，我给它以下样式

position: relative; height: 100%; background-color: yellow

在最新的FF和Chrome中运行良好。

任何人都知道如何做到这一点？

Answer 1

看起来@Michael_B的链接很有帮助。

答案是将display: flex添加到列中，并从嵌套容器中删除height: 100%声明，这允许它填充高度。然后从列中删除背景颜色，并将其应用于嵌套容器。