Css 您能否使flexbox子对象展开以适合父对象而不是内容？

我正在使用一个

flexbox

使div占据浏览器窗口中剩余的垂直空间，但我想防止它超出这个范围。当它的内容超过它的垂直大小时，我希望flexbox子项中显示一个滚动条，它现在太小了

这可能吗？或者我应该使用其他一些布局技巧来实现这一点

下面是一个指向JSFIDLE的链接，以显示这种情况：

---

另一个垂直空间被一个工具栏占据，其确切的垂直大小事先不知道。

只需将

溢出：auto

添加到

#content

（）：

---

不过，这在Safari中不起作用。有什么想法吗？这是非常基本和标准的css，所以我很确定这不是问题所在。Safari版本（包括8版）需要-webkit-prefix作为flexbox属性的前缀。

#content {
    background-color: #ceecf5;
    flex-grow: 1;
    overflow: auto;
}