title: Dynamic height auto-resize with css
body: <p>As I can have a div with two children inside, one of which is not shown (display: none) and the other occupies the entire space of the father, but when I tell javascript to display the hidden the other autoredimensiones to space left without using javascript?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="child1" id="id1"&gt;
      &lt;/div&gt;
      &lt;div class="child2"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.parent {
      height: 200px;
      background-color: red; 
  }
  .child2 {
      height: 100%;
      background-color: blue;
  }
  .child1 {
      display:none;
      height: 50px;
      background-color: green;
  }
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>var myDiv = document.getElementById('id1');
  myDiv.style.display="block";
  </code></pre>