title: Relative height AND sticky footer with flexbox
body: <p>I'm trying to craft a bootstrap layout matching these criterias:</p>
  
  <ul>
  <li>a sticky footer</li>
  <li>unknown heights</li>
  <li>inner content divs with relative min-heights (i.e. min-height 50 %)</li>
  <li><p>no JS if possible</p>
  
  <pre><code>// HTML    
      &lt;body&gt;
        &lt;div id="container"&gt;
          &lt;header&gt;&lt;/header&gt;
          &lt;div id="content"&gt;
            &lt;div style="background:red;"&gt;&lt;/div&gt;
            &lt;div style="background:green;"&gt;&lt;/div&gt;
            &lt;div style="background:blue;"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;footer&gt;&lt;/footer&gt;
        &lt;/div&gt;
      &lt;/body&gt;
  
  // SCSS
      header,footer{
          height:50px;
          background:grey;
      }
      html, body{
        height:100%;
      }
      #container{
          display: flex;
          flex-direction: column;
          min-height: 100vh;
          height:100%; // if added, #content&gt;div is broken. If removed, sticky footer is broken.
          &amp; #content{
              flex:1;
              height:100%;
              &amp; div{
                height:50%;
              }
          }
      }
  </code></pre></li>
  </ul>
  
  <p>I also have a fiddle over there : <a href="https://jsfiddle.net/yakou32/706z8o80/12/" rel="nofollow">https://jsfiddle.net/yakou32/706z8o80/12/</a></p>
  
  <p>I can manage to have a sticky footer or a relative inner content, but not both simultanously...</p>