Scrollable Panels
comment 0

Create Responsive, Scrollable Panels with Flexbox

Tuts+ contributor Cory Simmons has written a cool tutorial on how to create responsive scrollable panels with flexible box or Flexbox. Flexbox is a CSS box model that allows children of a flex container to be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Here are the general idea of the whole markup:

HTML

Make sure to wrap your entire page in a container.

<div class="wrap">
 
  <main>
 
    <aside>
      <h1>Sidebar</h1>
      <p>
        lipsum...
      </p>
    </aside>
 
    <article>
      <h1>Content</h1>
      <p>
        lipsum...
      </p>
    </article>
 
  </main>
 
</div>

CSS

html and body are given height:100%. The .wrap is also set with display:flex to give the child elements access to flex property.

html, body {
  height: 100%;
}
 
.wrap {
  height: 100vh;
  display: flex;
}

Make it Flexible

Set flex property and value to main, aside and article. To make aside and article scrollable, set overflow-y: scroll. Otherwise, the whole page will be scrollable just as a usual website.

main {
  flex: 1;
  display: flex;
}
 
aside, article {
  overflow-y: scroll;
  padding: 2em;
}
 
aside {
  flex: 1;
}
 
article {
  flex: 2;
}

Hit the button below to read the full tutorial.

View More   View Demo

Filed under: CSS

About the Author

Posted by

Sani Halid is a front-end developer at Stampede and is committed to clean and elegant code. Yet another gamer to join the pack, Sani is also the Editor at Constructs where he shares his daily CSS findings and other front-end development goods.

Leave a Reply