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

Scrolling a Flexbox with Overflowing Content

Problem:

Consider the following layout:

[Image of layout]

When the content area overflows, the entire page scrolls, rather than just the content area itself. Applying overflow: auto to the content div solves this issue, but it causes the borders of the columns to be cut off.

Question:

How can the content area be set to scroll independently, while allowing its children to extend beyond the content box's height?

Answer:

According to Tab Atkins, the author of the flexbox spec, the following approach can be used:

.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>

By setting min-height to min-content on the box div, the columns will extend beyond the content box's height, while still allowing the content area to scroll independently. Vendor prefixes may be required for compatibility.

The above is the detailed content of How to Make a Flexbox Content Area Scroll Independently While Allowing Child Elements to Overflow?. For more information, please follow other related articles on the PHP Chinese website!