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)

  
Header
  

    

      
Pellentesque habitant morbi tristique senectus et netus et malesuada 
         fames ac turpis egestas...
      
Pellentesque habitant morbi tristique senectus et netus et malesuada 
         fames ac turpis egestas...
      
Pellentesque habitant morbi tristique senectus et netus et malesuada 
         fames ac turpis egestas...
                            .
                            .
                            .
    
    
Aside 1
    
Aside 2
  
  
Footer

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.