滚动包含溢出内容的flexbox

作者

以下是我用来实现上述布局的代码：

.header{
高度：50px；
}
.身体{
位置：绝对位置；
顶部：50px；
右：0；
底部：0；
左：0；
显示器：flex；
}
.侧边栏{
宽度：140px；
}
梅因先生{
弹性：1；
显示器：flex；
弯曲方向：立柱；
}
.内容{
弹性：1；
显示器：flex；
}
.栏目{
填充：20px；
右边框：1px实心#999；
}
&lt；div class=“header”&gt；主收割台&lt/部门&gt；
&lt；div class=“body”&gt；
&lt；div class=“侧栏”&gt；边栏&lt/部门&gt；
&lt；div class=“main”&gt；
&lt；div class=“页眉”&gt；页眉。内容列如下所示。&lt/部门&gt；
&lt；div class=“content”&gt；
&lt；div class=“column”&gt；第1栏&lt/部门&gt；
&lt；div class=“column”&gt；第1栏&lt/部门&gt；
&lt；div class=“column”&gt；第1栏&lt/部门&gt；
&lt/部门&gt；
&lt/部门&gt；
&lt/部门&gt

我省略了用于样式设置的代码。你可以在钢笔里看到所有的东西

上述方法有效，但当内容区域的内容溢出时，会使整个页面滚动。我只希望内容区域本身滚动，因此我将overflow:auto添加到contentdiv

现在的问题是，柱本身并没有超出其父高度，因此边界也在那里被切断

这是显示滚动问题的笔

如何将内容区域设置为独立滚动，同时其子项仍延伸到内容框的高度之外？

我已经和Tab Atkins（flexbox规范的作者）谈过这个问题，这就是我们提出的：

HTML:

&lt；div class=“content”&gt；
&lt；div class=“box”&gt；
&lt；div class=“column”&gt；第1栏&lt/部门&gt；
&lt；div class=“column”&gt；第2栏&lt/部门&gt；
&lt；div class=“column”&gt；第3栏&lt/部门&gt；
&lt/部门&gt；
&lt/部门&gt；

CSS:

.content{
弹性：1；
显示器：flex；
溢出：自动；
}
.盒子{
显示器：flex；
最小高度：最小内容；/*需要供应商前缀*/
}

这些是钢笔：

  1. 短柱被拉伸
  2. 较长的列溢出和滚动

之所以这样做，是因为align items:stretch在项目具有固有高度时不会收缩项目，这是通过min content实现的

相关文章：

  1. 如何使浮动元素居中？
  2. 用于Firefox的自定义CSS滚动条
  3. 大纲对文本的影响
  4. 如何调整单个flexbox项（覆盖调整内容）[重复]

发表评论

© 2026 开发百科-程序代码问答平台 • Built with