title: Make flex child element occupy 100% height of parent flex
body: <p>I have a container flex with content flexes. How do i make content flex occupy full width and height of container flex.</p>
  
  <pre><code>&lt;div id="main"&gt;
  &lt;div id="main-nav"&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  #main{
     display: flex;
     flex-direction: column;
     height: 100vh;
     width: 100vw;
  }
  #main-nav{
      width: 100%
      height: 50px; 
  }
  .container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1;
  }
  .content{
  display: flex;
  width: 100%;
  height: 100%;
  }
  </code></pre>
  
  <p>The above code makes content to occupy 100% width of container but height is based on the text within the content. I tried the solutions mentioned from similar questions but had no luck and it was still the same.</p>
  
  <p>Basically, I want each of the content to occupy the same height as occupied by the container in the viewport height. I also tried jQuery,</p>
  
  <pre><code>var rht = $("#container").height();
  $(".content").height(rht);
  </code></pre>
  
  <p>It changes the height properly but adds a horizontal scroll bar with increase in width.</p>