title: How to make div height 100% inside relative div?
body: <p>This is my code:</p>
  
  <pre><code>&lt;div class="parent"&gt;
    &lt;div class="child-1"&gt; CHILDREN 1 &lt;/div&gt;
    &lt;div class="child-2"&gt; CHILDREN 2 &lt;/div&gt;
    &lt;div class="child-3"&gt; CHILDREN 3 &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.parent {
    position: relative;
    height: 250px;
  }
  .child-1 {
    position: absolute;
    top: 0;
    width: 100%;
  }
  .child-2 {
    height: 100%;
  }
  .child-3 {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  </code></pre>
  
  <p>I set child-2 as <b>100%</b> but didn't happen. So, how to make <b>.child-2</b> height 100% and between child-1 and child-3?</p>