Scrolling a flexbox with overflowing content

by

enter image description here

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?

11 Answers
11

Leave a Comment