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

这有点奇怪。

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

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