如何在 Safari 的 flexbox 列内获取全高嵌套容器答案

【问题标题】：How to obtain a full height nested container inside a flexbox column in Safari如何在 Safari 的 flexbox 列内获取全高嵌套容器
【发布时间】：2017-02-23 02:35:47
【问题描述】：

我有一个代码笔，可以突出显示我遇到的问题：

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

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

为了让它填充到其他浏览器中，我给它下面的样式

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

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

有人知道怎么做吗？

【问题讨论】：

可能的指导：stackoverflow.com/q/33636796/3597276

标签： css twitter-bootstrap twitter-bootstrap-3 safari flexbox

【解决方案1】：

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

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

【讨论】：