title: flexbox: stretching the height of elements with flex-direction: row
body: <p>I want to stretch two div elements (<code>.sideline</code> and <code>.main-contents</code>) to reach the bottom of the page and stay at a certain height from the footer.</p>
  
  <p>The two divs are nested inside a div (<code>.row-elements</code>) with the <code>flex-direction: row</code> since I wanted them to be on the same row.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* body {
        display:flex;
        flex-direction:column;
      } */
  
  .one-above-all {
    display: flex;
    flex-direction: column;
    /*   flex: 1 0 auto; */
    /*   min-height: 1100px; */
    border: solid black 1px;
  }
  .top-block {
    margin: 0 auto;
    border: solid black 1px;
    width: 300px;
    height: 30px;
    margin-top: -15px;
  }
  .headline {
    border: solid black 1px;
    width: 90%;
    align-self: flex-end;
    margin-top: 40px;
    margin-right: 10px;
    height: 160px;
    display: flex;
    box-sizing: border-box;
  }
  .row-elements {
    display: flex;
    flex-direction: row;
    margin-top: 40px;
    align-items: stretch;
    /*   min-height: 900px;
           flex: 1 0 auto;
         */
  }
  .sideline {
    width: 160px;
    border: solid 1px;
    margin-left: calc(10% - 10px);
    box-sizing: border-box;
    flex-shrink: 1
  }
  .main-contents {
    border: solid 1px;
    margin-left: 40px;
    /*   align-self: stretch; */
    flex: 1 1 auto;
    margin-right: 10px;
    box-sizing: border-box;
  }
  .bottom-block {
    align-self: flex-end;
    margin-top: auto;
    border: black solid 1px;
    margin: auto;
    width: 300px;
    height: 30px;
    margin-bottom: -10px;
    /*   margin-top: 880px; */
  }
  /* .stretch-test {
        border:solid, 1px;
        display: flex;
        flex-direction: column;
        
        flex: 1 0 auto;
      } */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="one-above-all"&gt;
    &lt;div class="top-block"&gt;&lt;/div&gt;
    &lt;div class="headline"&gt;&lt;/div&gt;
    &lt;!-- &lt;div class="stretch-test"&gt; --&gt;
    &lt;div class="row-elements"&gt;
      &lt;div class="sideline"&gt;&lt;/div&gt;
      &lt;div class="main-contents"&gt;jhjkdhfjksdhafjksdahfl&lt;/div&gt;
      &lt;!--&lt;/div&gt; --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="bottom-block"&gt;footer&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/binarytrance/pen/xOoydX" rel="nofollow">Codepen</a></p>
  
  <p>The commented out code in the css is the things I have tried.</p>
  
  <p>I tried to set the <code>body</code> as flex and give the row-elements class <code>flex</code> property of <code>1 0 auto</code> which didn't work.</p>
  
  <p>I tried nesting the <code>row-elements</code> class (which has the <code>flex-direction</code> of <code>row</code>) in another div with a <code>flex-direction</code> of <code>column</code> and setting <code>.row-elements</code> to <code>flex:1 0 auto</code> which also didn't work.</p>
  
  <p>I tried totally removing the the row-elements class but the two divs won't come on the same row.</p>
  
  <p>Any solution will be appreciated.</p>