title: Divide the page in two (vertically) among two children, if one not available, other should cover complete page
body: <p><img src="https://i.stack.imgur.com/jW3EB.jpg" alt="Two scenarios"></p>
  
  <p>I hope the pictures describes what I want. Currently both the child div have <code>height:50%</code> 
  However, when one of them is absent, I want the other to cover the entire page.</p>
  
  <p>I am looking for a <code>css</code> only solution as I presume I'm missing something very fundamental! :P</p>