Can flexbox children have overflow scrollbar(s)?

Question

I\'d like to use the CSS3 flexbox model to create a cross-device layout and found a nice example layout by HugoGiraudel which I used as a starting point.

The layout

Answer 1

The reason your article content expands the whole layout is that it doesn't have any height limitation. Something like max-height would limit its growth, and then a vertical scrollbar could appear.

Here's your code with a few adjustments:

HTML (added a nested flex container for article and asides)

<div class="wrapper">
  <header class="header">Header</header>
  <section class="inner-wrapper">
    <article class="main">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada 
         fames ac turpis egestas...</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada 
         fames ac turpis egestas...</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada 
         fames ac turpis egestas...</p>
                            .
                            .
                            .
    </article>
    <aside class="aside aside-1">Aside 1</aside>
    <aside class="aside aside-2">Aside 2</aside>
  </section>
  <footer class="footer">Footer</footer>
</div>

CSS (key adjustments only)

html, body {
  height: 100%;
}

.wrapper {
  display: flex;  
  height: 100%;
  flex-direction: column;        /* switch main container from row direction */
}

.inner-wrapper {
  display: flex;                 /* nested flex container; row direction */
  flex: 0 0 50%;                 /* limit height of container; adjust as necessary */
  min-height: 0;                 /* addresses a scrolling bug in Firefox;
                                    http://stackoverflow.com/a/34982902/3597276 */
}

.header {
    flex: 1;                     /* header to occupy all available height */
}

.footer {
  flex: 1;                       /* footer to occupy all available height */
}

.main {
  overflow-y: scroll;            /* enable vertical scrollbar */
}

Revised Codepen

NOTES:

• Now the main flex container (.wrapper) has three flex items stacked vertically.
• The height of each item can be set individually. In the code above, the header and footer are told to consume all available space (flex: 1). The middle flex item (.inner-wrapper) is confined to 50%, which enables scrolling. Try 25% and 75% for alternative examples.
• The middle item doubles as a flex container, and lines up the article and asides horizontally. The width of each item can be set individually. The previous point applies here, as well.