大佬教程收集整理的这篇文章主要介绍了css – 滚动包含溢出内容的flexbox，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
HTML：
<div class="header">Main header</div>
<div class="body">
<div class="sidebar">Sidebar</div>
<div class="main">
<div class="page-header">Page Header. Content columns are below.</div>
<div class="content">
<div class="column">column 1</div>
<div class="column">column 1</div>
<div class="column">column 1</div>
</div>
</div>
</div>
CSS：
.header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; display: flex; } .column { padding: 20px; border-right: 1px solid #999; }
我省略了用于样式的代码。你可以在the pen看到它。
以上工作，但是当内容区域的内容溢出时，它使整个页面滚动。我只想要内容区域本身滚动，所以I added overflow: auto to the content div。
现在的问题是，列本身不会超出其父级高度，因此边框也被截断了。
Here’s the pen showing the scrolling issue。
如何设置内容区域以单独滚动，同时仍然有其子扩展超出内容框的高度？
HTML：
<div class="content">
<div class="box">
<div class="column">column 1</div>
<div class="column">column 1</div>
<div class="column">column 1</div>
</div>
</div>
CSS：
.content { flex: 1; display: flex; overflow: auto; } .box { min-height: min-content; /* needs vendor prefixes */ display: flex; }
这里是笔：
> Short columns being stretched。
> Longer columns overflowing and scrolling。
这是因为align-items：stretch不会收缩它的项目，如果他们有一个固有的高度，这是由min内容完成。
以上是大佬教程为你收集整理的css – 滚动包含溢出内容的flexbox全部内容，希望文章能够帮你解决css – 滚动包含溢出内容的flexbox所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。