html - Flexbox child 扩展容器而不是溢出

Question

我正在尝试使用 flexbox 创建布局，但我很困惑为什么我不能强制 UI 的特定部分溢出滚动条。一切似乎都很好，直到添加了一个似乎扩展了一切的大 child 。

这是笔:http://codepen.io/tuckwat/pen/NNWRaB ？

请注意滚动条出现在整个页面上，当 child 太大时，我希望滚动条出现在#view 容器(深蓝色)上。

这是一支带溢出的笔:自动添加到#view - http://codepen.io/tuckwat/pen/VawKyp

我怎样才能让这个布局工作？我不想在 View 上使用绝对定位，因为边栏或应用栏可以动态调整大小。

HTML

<div id="body">
  <div id="appbar">appbar</div>
  <div id="main">
    <div id="sidebar">side</div>
    <div id="content">
      <div id="navbar">nav</div>
      <div id="view">
        This view container should scroll
        <div id="view-content">
         This content makes the view grow too large
        </div>
      </div>
    </div>
  </div>
</div>

CSS

#body{
  background: #ccc;
  display:flex;
  flex-direction: column;
  position:absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top:0px;
}

#appbar{
  height:55px;
}

#main{
  display: flex;
  flex:1;
  background: #ddd;
}

#sidebar{
  height:100%;
  background:#660099;
  width:50px;
  flex-shrink:0;
}

#content{
  display:flex;
  flex:1;
  flex-direction:column;
}

#navbar{
  height:20px;
  background:#3cd;
}

#view{
  flex:1;
  background:#126;
  overflow: auto;
}

#view-content{
  width:1500px;
  height:1500px;
  background: #ff6600;
}

Answer 1

另一个问题...我发现了一篇类似的博客文章，其中概述了解决方案的问题:http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

当应用于我的代码笔时，它在 Chrome 和 IE 中运行良好，但滚动条在 Firefox 中不显示。我以为与浏览器怪癖作斗争的日子已经结束了......

http://codepen.io/tuckwat/pen/qZBrya

#body{
   overflow: hidden;
   ...
}

#content{
   overflow: hidden;
   ...
}

最后 - 解决方案

我很接近，但 Firefox 要求 Flexbox 元素的最小高度。这是一款适用于 IE、Chrome 和 Firefox 的笔:http://codepen.io/tuckwat/pen/oxNZJW