Here's the code I'm using to achieve the above layout:
I omitted the code used for styling. You can see all of it in the pen.
The above works, but when the content
area's content overflows, it makes the whole page scroll. I only want the content area itself to scroll, so I added overflow: auto
to the content
div.
The problem with this now is that the columns themselves don't extend beyond their parents height, so the borders are cut off there too.
Here's the pen showing the scrolling issue.
How can I set the content
area to scroll independently, while still having its children extend beyond the content
box's height?
I've spoken to Tab Atkins (author of the flexbox spec) about this, and this is what we came up with:
HTML:
<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>
CSS:
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
display: flex;
min-height: min-content; /* needs vendor prefixes */
}
Here are the pens:
The reason this works is because align-items: stretch
doesn't shrink its items if they have an intrinsic height, which is accomplished here by min-content
.