title: Make only one child take 100% height of parent with display flex?
body: <p>In the following code I have <code>div</code> with class <code>container</code>having <code>display</code> property set to <code>flex</code> and it has two <code>div</code> children with class <code>sidebarcontainer</code> and <code>mainpage</code> and I want <code>div</code> with class 'sidebarcontainer' to take 100% height of parent div.</p>
  
  <p>code: <a href="https://jsfiddle.net/dydjgp9g/" rel="nofollow noreferrer">https://jsfiddle.net/dydjgp9g/</a></p>
  
  <p>But actually I don't necessarily want <code>display: flex</code> to parent but if I remove than whole page shift down!</p>
  
  <p>How to do that?</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>/*******************page layout**************************/
  
  .container {
    width: 100%;
    background-color: #d5d5d5;
    display: flex;
    align-items: flex-start;
  }
  
  .sidebarcontainer {
    width: 250PX;
    /*height: 6000px;*/
    display: inline-block;
    box-sizing: border-box;
    padding: 5px;
    padding-right: 2px;
  }
  
  .innersidebarcontainer {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .sidebar {
    width: 243px;
    background-color: white;
    height: 500px;
    /*top: 1px;*/
    /*bottom: 0;*/
    /*position: absolute;*/
  }
  
  .mainpage {
    width: calc(100% - 250px);
    padding: 5px;
    padding-left: 2px;
    height: 600px;
    display: inline-block;
    box-sizing: border-box;
  }
  
  .page {
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    align-content: flex-start;
  }
  
  .footer {
    height: 500px;
    width: 100%;
    margin: 0 auto;
    background-color: #031003;
  }
  
  
  /***************end of pagelayout******************/
  
  .card {
    width: 250px;
    /*height: 400px;*/
    align-self: flex-start;
    margin: 10px;
    display: inline-block;
  }
  
  .image {
    width: 200px;
    margin: 0 auto;
    height: 250px;
  }
  
  .image img {
    width: 100%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="sidebarcontainer"&gt;
      &lt;div class="innersidebarcontainer"&gt;
        &lt;div class="sidebar"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--
      --&gt;
    &lt;div class="mainpage"&gt;
      &lt;div class="page"&gt;
        &lt;h1&gt;page&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>