Scrolling a flexbox with overflowing content

Question

Here's the code I'm using to achieve the above layout:

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

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

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?

Answer 1

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:

1. Short columns being stretched.
2. Longer columns overflowing and scrolling.

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.

Answer 2

I just solved this problem very elegantly after a lot of trial and error.

Check out my blog post: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

Basically, to make a flexbox cell scrollable, you have to make all its parents overflow: hidden;, or it will just ignore your overflow settings and make the parent larger instead.