Flexbox 子项扩展容器而不是溢出

Question

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

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

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

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

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

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

当应用于我的 codepen 时，它在 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

Answer 2

这很奇怪。

您的所有三个 codepen 都缺少“overflow：auto;”对于视图类。添加它完全符合您的要求，如绝对定位的代码笔所示。

您使用什么浏览器？ （我会在评论中这样做，但我还没有足够的代表。）