title: Have flexbox fill up vertical space of browser for sidemenu
body: <p>I need to have a sidemenu that scales depending on the browser size. But also i need a header and footer, and the also a content container next to the sidemenu. So lets say that the sidemenu is 1/4 of the width and the content container is 3/4 of the width, but the height of both the sidemenu and the content container is always 100% of the browser size or more, depending on the content inside the content container and the sidemenu.</p>
  
  <p>I would think this would be simple, just have the flext-dir. to col. and "flex: 1" on the childeren. (and a little more code, its in the fiddle link under)</p>
  
  <p>But as soon as I wrap the sidemenu inside a new div, so that I can make the content container go next to the sidemenu and not under. The vertical fill from flexbox, fails.</p>
  
  <p><a href="https://jsfiddle.net/frrvdq2n/2/" rel="nofollow noreferrer">https://jsfiddle.net/frrvdq2n/2/</a></p>
  
  <p>So do anyone have som suggestions on how to solve this, or maybe other tips to create this idea. Thanks ahead :) </p>
  
  <p><a href="https://i.stack.imgur.com/XUnGD.jpg" rel="nofollow noreferrer">IMG. of how om thinking the sizing should be on most browser sizes.</a></p>
  
  <p>Here is also the code, just incase:</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;!--&lt;div class="container"&gt; uncomment to see colapse--&gt;
      &lt;div class="wrapper"&gt;
        &lt;div class="row3"&gt;Option One&lt;/div&gt;
        &lt;div class="row3"&gt;Option Two&lt;/div&gt;
        &lt;div class="row3"&gt;Option Three&lt;/div&gt;
      &lt;/div&gt;
    &lt;!--&lt;/div&gt;uncomment to see colapse--&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.wrapper, html, body {
    height:100%;
    margin:0;
  }
  
  .wrapper {
     display: flex;
     flex-direction: column;
  }
  
  .row3 {
     background-color: green;
     flex:2;
     display: flex;
  }
  </code></pre>