如何使 Flexbox 内容区域独立滚动，同时允许子元素溢出？-css教程-PHP中文网

如何使 Flexbox 内容区域独立滚动，同时允许子元素溢出？

Mary-Kate Olsen

发布： 2024-11-29 21:39:13

原创

1001 人浏览过

How to Make a Flexbox Content Area Scroll Independently While Allowing Child Elements to Overflow?

滚动内容溢出的 Flexbox

问题：

考虑以下布局：

[图片布局]

当内容区域溢出时，整个页面滚动，而不仅仅是内容区域本身。对内容div应用overflow: auto解决了这个问题，但是会导致列的边框被切断。

问题：

内容区域如何设置为独立滚动，同时允许其子项超出内容框的范围高度？

答案：

根据 Flexbox 规范的作者 Tab Atkins 的说法，可以使用以下方法：

.content {
    flex: 1;
    display: flex;
    overflow: auto;
}

.box {
    display: flex;
    min-height: min-content;
}

登录后复制

<div class="content">
  <div class="box">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</div>

登录后复制

通过将 box div 上的 min-height 设置为 min-content，列将超出内容框的高度，而仍然允许内容区域独立滚动。为了兼容性，可能需要供应商前缀。

以上是如何使 Flexbox 内容区域独立滚动，同时允许子元素溢出？的详细内容。更多信息请关注PHP中文网其他相关文章！