Question

我试图使用flexbox创建一个布局但是我很难过为什么我不能强迫我的UI的特定部分溢出滚动条。在添加一个似乎扩展一切的大孩子之前，一切似乎都很有效。

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

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

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

如何让这种布局起作用？我不想在视图上使用绝对定位，因为侧边栏或appbar可以动态调整大小。

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

这很奇怪。

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

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

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

2 个答案: