Make flex items on second row take remaining height of container

Question

I am trying to create a layout with a header on top, underneath it a sidebar and the main content.

I would like to have the sidebar and the content view take over the vertical space left by the header. The problem is that the header can dynamically re-size so I cannot perform a calc(). My solution was to use the flexbox scheme.

I divided the viewport horizontally into two parts. One is the header and one is a wrapper for the sidebar and main content.

The sidebar is floated left and given a percentage of the width and the content is floated right and given the rest.

The problem is that I am trying to make the sidebar always be 100% height of the wrapper.

I tried height: 100% and min-height: 100% but these do not work.

I do not wish to absolutely position it since if the wrapper were to overflow with the main content, the sidebar would not expand accordingly.

Here is my pen: http://codepen.io/markt5000/pen/JXNXpW

As you can see the orange is the header and the red space is the wrapper with the sidebar and the content.

here is the layout

<div class="header">
</div>

<div class="row">

  <div id="sidebar">
  </div>

 <div id="main-content">
 </div>

</div>

Answer 1

There's no need for:

• height, min-height or calc on your flex items
• absolute positioning
• floats (in fact, they're useless because floats are ignored in a flex formatting context)

Flex properties have all the power you need to make the layout work. The key is to use flex: 1 to make items expand the full available length of the container.

So your header's height can be dynamic and the sidebar and main content can be made to consume whatever height remains. No scrollbars.

Here's your code with some revisions:

html { height: 100%; }

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.outer-flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;  /* main flex container stacks items vertically */
}

.header {
  height: 80px;            /* demo purposes; from your original code */
  background-color: orange;
}

.nested-flex-container {
  display: flex;           /* inner flex container stacks items horizontally */
  flex: 1;                 /* KEY RULE: tells this second flex item of main container
                                  to consume all available height */
  align-items: stretch;    /* KEY RULE: default setting. No need to include. Tells
                                  children to stretch the full length of the container
                                  along the cross-axis (vertically, in this case). */
}

.sidebar {
  flex-basis: 20%;        /* set width to 20% */
  background-color: aqua;
}

.content {
  flex: 1;                /* set width to whatever space remains */
  background: magenta;
}

<div class="outer-flex-container">

     <div class="header">HEADER</div><!-- main flex item #1 -->

     <div class="nested-flex-container"><!-- main flex item #2 -->
    
          <div class="sidebar">SIDEBAR</div><!-- inner flex item #1 -->
    
          <div class="content">MAIN CONTENT</div><!-- inner flex item #2 -->
    
     </div><!-- close inner flex container -->

</div><!-- close outer flex container -->

Revised Codepn

Answer 2

Is this what you're going for? http://codepen.io/Shambolaz/pen/xVdVyd

.view .row
{
  flex: 1 1 auto;
  background:red;
  height: 90%;
}

Answer 3

When content is larger than it's element, to get true 'fixed position' behavior add overflow: auto to the content element.

Also make sure height is concretely specified for all parents of the content element.

By that I mean there must be an ancestor element that has a specified height (either fixed px or 100vh).

Stack Overflow puts the snippet in an iFrame, which has a fixed-height parent, so the elements using height: 100% have something to calculate from.

We can therefore just add height: 100% to the content div, and the scrollbar will show up there.

This is the modified pen (also has a fixed height ancestor). You can experiment by removing the height CSS rules at various points, and see the scrollbar move up the element tree.

html { height: 100%; }
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.outer-flex-container {
  display: flex;
  flex-direction: column;  
  height: 100%;
}

.header {
  height: 80px;            
  background-color: orange;
}

.nested-flex-container {
  display: flex;          
  flex: 1;
}

.sidebar {
  flex-basis: 20%;       
  background-color: aqua;
}

.content {
  flex: 1;                
  background: magenta;
  overflow-y: auto;     
  height: 100%;
}

<div class="outer-flex-container">

     <div class="header">HEADER</div><!-- main flex item #1 -->

     <div class="nested-flex-container"><!-- main flex item #2 -->
    
          <div class="sidebar">SIDEBAR</div><!-- inner flex item #1 -->
    
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Porttitor eget dolor morbi non arcu risus quis varius quam. Commodo viverra maecenas accumsan lacus. Vitae elementum curabitur vitae nunc sed velit dignissim. Auctor urna nunc id cursus metus aliquam eleifend. Bibendum ut tristique et egestas. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Diam maecenas ultricies mi eget mauris pharetra et. Ultricies mi eget mauris pharetra. Nibh mauris cursus mattis molestie.
            <br/>
            Urna neque viverra justo nec ultrices dui sapien. Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Nunc non blandit massa enim nec dui nunc. Amet mattis vulputate enim nulla. Nisl condimentum id venenatis a condimentum vitae sapien. Magna sit amet purus gravida quis blandit turpis. Sed turpis tincidunt id aliquet risus. Aliquet lectus proin nibh nisl condimentum id venenatis a. Vitae purus faucibus ornare suspendisse sed. Sit amet commodo nulla facilisi nullam. Egestas fringilla phasellus faucibus scelerisque eleifend. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Viverra adipiscing at in tellus integer feugiat. Scelerisque eu ultrices vitae auctor eu augue. At urna condimentum mattis pellentesque.
            <br/>
            Quisque id diam vel quam elementum pulvinar etiam non quam. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. Diam quis enim lobortis scelerisque fermentum dui. Tortor id aliquet lectus proin nibh. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus. Egestas fringilla phasellus faucibus scelerisque. Venenatis a condimentum vitae sapien pellentesque habitant. Quis vel eros donec ac odio tempor orci. Ultrices sagittis orci a scelerisque. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Dis parturient montes nascetur ridiculus mus mauris. Nisl vel pretium lectus quam id leo in vitae. Euismod elementum nisi quis eleifend quam adipiscing vitae. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Urna porttitor rhoncus dolor purus non. Lobortis mattis aliquam faucibus purus in massa tempor nec. Risus pretium quam vulputate dignissim suspendisse in. Malesuada bibendum arcu vitae elementum curabitur. Quisque id diam vel quam elementum pulvinar. A erat nam at lectus urna duis convallis.
            <br/>
            Nulla facilisi nullam vehicula ipsum. Nibh ipsum consequat nisl vel pretium lectus quam id leo. Morbi tristique senectus et netus et malesuada fames ac turpis. Quis imperdiet massa tincidunt nunc pulvinar sapien. Amet volutpat consequat mauris nunc congue nisi vitae. Feugiat sed lectus vestibulum mattis ullamcorper. Pharetra magna ac placerat vestibulum lectus. Sed faucibus turpis in eu mi bibendum neque egestas. A condimentum vitae sapien pellentesque habitant. Mi bibendum neque egestas congue quisque egestas diam. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Lacus luctus accumsan tortor posuere ac ut.
            <br/>
            Sit amet cursus sit amet dictum. Sem integer vitae justo eget magna fermentum iaculis eu non. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Facilisis gravida neque convallis a cras semper. Nullam vehicula ipsum a arcu. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Et odio pellentesque diam volutpat commodo sed egestas egestas. Velit aliquet sagittis id consectetur. Faucibus vitae aliquet nec ullamcorper. In iaculis nunc sed augue lacus viverra. Vitae semper quis lectus nulla at volutpat diam ut venenatis. Et malesuada fames ac turpis. Felis imperdiet proin fermentum leo vel. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Quis varius quam quisque id diam vel quam. Ornare arcu dui vivamus arcu felis bibendum ut. Turpis massa sed elementum tempus egestas sed. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Arcu ac tortor dignissim convallis aenean et tortor.
          </div><!-- inner flex item #2 -->
    
     </div><!-- close inner flex container -->

</div><!-- close outer flex container -->