title: Getting a 100% height div inside a flexbox item
body: <p>I'm trying to produce the following layout, using flexbox.</p>
  
  <p><a href="https://i.stack.imgur.com/mnsVq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mnsVq.png" alt="enter image description here"></a></p>
  
  <p>The top black bar, the middle section and bottom black bar are all flex items, which are children of a wrapper div just inside the body tag, which looks as follows.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'&gt;
      &lt;link href="~/Styles/bootstrap.min.css" rel="stylesheet" /&gt;
      &lt;link href="~/Styles/font-awesome.min.css" rel="stylesheet" /&gt;
      &lt;link href="~/Styles/ppt_site.css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="wrapper"&gt;
  
          &lt;div id="topRow"&gt;
          &lt;/div&gt;
  
          &lt;div id="centralRow"&gt;
  
              &lt;div id="sidebarColumn"&gt;
              &lt;/div&gt;
  
              &lt;div id="contentColumn"&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div id="bottomRow"&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      @Section['customScripts']
      &lt;script src="~/Scripts/siteGlobals.js"&gt;&lt;/script&gt;
  
      &lt;script src="~/requireconfig"&gt;&lt;/script&gt;
      &lt;script data-main="~/scripts/NewTemplatesAppLoader.js" src="~/requirejs"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The style sheet controlling all of this is as follows</p>
  
  <pre><code>.wrapper, html, body {
      height: 100%;
      margin: 0;
  }
  
  .wrapper {
      display: flex;
      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column;
  }
  
  #topRow {
      background-color: black;
      color: white;
  }
  
  #centralRow {
      -ms-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      display: flex;
      -ms-flex-direction: row;
      -webkit-flex-direction: row;
      flex-direction: row;
  }
  
  #bottomRow {
      background-color: #333333;
      color: white;
  }
  
  #sidebarColumn {
      background-color: #B83B1D;
      color: white;
  }
  
  #contentColumn {
      -ms-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      background-color: #F7F7F7;
      color: black;
      padding: 10px;
      overflow-y: auto;
  }
  </code></pre>
  
  <p>As far as the main layout goes, this all works perfectly, you'll notice however if you look in the image, the red side bar as an area at the top with a yellow border.</p>
  
  <p>That area, is destined to be a div that stretches the full height of the red area (Sidebar Column) in the above CSS, but try as I might I cannot get it to do what I need.</p>
  
  <p>Ideally, I want it to be a div, that's a flex container, which I can then put 4 flex items into and have each of them take up a quarter of the space available each, but because the div with the yellow border cannot seem to see the height of the parent container (The red sidebar, which is a flex item itself) then it only ever takes up the height of space around it's content.</p>
  
  <p>I've tried wrapping it in more div's and positioning those divs, I've wrapped further flex boxes in further divs, I've tried blocks, inlines, table-cells and just about everything else I can think of.</p>
  
  <p>No matter what I try I just can't seem to get the yellow bordered container to be the same height as it's parent.</p>
  
  <p>Any ideas anyone?</p>
  
  <h1>Update (The following morning)</h1>
  
  <p>The 2 proposed solutions, do indeed work, in their own right and they work as I would have expected them too.</p>
  
  <p>In my particular case however, they don't work.</p>
  
  <p>I'm using NancyFX with it's super simple view engine, and I'm using KnockoutJS to compose "Web Components" so I can keep my pieces re-usable.</p>
  
  <p>If I edit my "Master Template", and insert the div's directly in the markup, nested below #sidebarColumn I get the 4 divs of equal size as desired.</p>
  
  <p>However, what actually needs to happen is the following, my template looks as follows:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  
      &lt;div id="topRow"&gt;
          @Section['topbarContent']
      &lt;/div&gt;
  
      &lt;div id="centralRow"&gt;
  
          &lt;div id="sidebarColumn"&gt;
              @Section['sidebarContent']
          &lt;/div&gt;
  
          &lt;div id="contentColumn"&gt;
              @Section['bodyContent']
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div id="bottomRow"&gt;
          @Section['bottombarContent']
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>If I remove the "@Section['sidebarContent']" and put the divs directly in they work.</p>
  
  <p>If I put the divs directly in my "Page" that uses the template as follows:</p>
  
  <pre><code>@Master['shared/ppt_layout.html']
  
  @Section['topbarContent']
      &lt;toptoolbar&gt;&lt;/toptoolbar&gt;
  @EndSection
  
  @Section['sidebarContent']
      &lt;div&gt;aaa&lt;/div&gt;
      &lt;div&gt;aaa&lt;/div&gt;
      &lt;div&gt;aaa&lt;/div&gt;
      &lt;div&gt;aaa&lt;/div&gt;
  @EndSection
  
  @Section['bodyContent']
      &lt;h1&gt;Body Content&lt;/h1&gt;
      &lt;p class="lead"&gt;I am the test page that uses a wide sidebar component&lt;/p&gt;
      &lt;p&gt;If you notice however, I also have a top toolbar with title added to me, and a footer bar.&lt;/p&gt;
      &lt;p&gt;We all use the same template however....&lt;/p&gt;
  @EndSection
  
  @Section['bottombarContent']
      &lt;footerbar&gt;&lt;/footerbar&gt;
  @EndSection
  
  @Section['customScripts']
  @EndSection
  </code></pre>
  
  <p>That also works, but If i place the markup in a knockout component, even just the straight divs as works in the page, then I get the effect I originally noticed.</p>
  
  <p>So for some reason, adding the content, using knockout components is the very thing that's causing the problem.</p>
  
  <p>Even if i try to build a new flex layout inside the component, vertically nothing at all works, horizontally however everything works perfectly.</p>
  
  <p>The footer bar for example is divided up into left and right sections with no problems at all, but vertical alignment just gets quashed.</p>