title: CSS child won't inherit height. Parent height in VH. Bootstrap 3
body: <p>First question asked here. I've looked around and googled but I can't find a solution to my problem. </p>
  
  <p>I have a parent (Bootstrap row) that takes up a calculated height, 100vh - 140px. This works great but I can't get it's children to take up percentage of it's parent. I have 3 divs inside. I want one to take upp 100% of it's parents height, and the other two 40% and 60%.</p>
  
  <p>I've read that 'height: inherit;' should work, but it doesn't. For compatibility I've  also added max-height with the wanted percentage.</p>
  
  <p>I've tried Chrome, Firefox and Safari.</p>
  
  <p>CSS code:</p>
  
  <pre><code>// Parent
  #start-page {
      min-height: calc(100vh - 140px);
  }
  // Children
  #init-square-1 {
      height: inherit;
      max-height: 100%;
  }
  #init-square-2 {
      height: inherit;
      max-height: 40%;
  }
  #init-square-3 {
      height: inherit;
      max-height: 60%;
  }
  HTML:
      &lt;section id="start-page" class="row"&gt;
          &lt;div id="init-square-1" class="col-xs-12 col-sm-6"&gt;&lt;/div&gt;
          &lt;div id="init-square-2" class="col-xs-12 col-sm-6"&gt;&lt;/div&gt;
          &lt;div id="init-square-3" class="col-xs-12 col-sm-6"&gt;&lt;/div&gt;
      &lt;/section&gt;
  </code></pre>