title: How to force an element with position:absolute to resize the parent div?
body: <p>Easy question. I just want to understand the logic. Why elements with position:absolute (and float:left too) do not "take up space" like position:relative? And how to force an element with position:absolute to resize the parent div?</p>
  
  <p><a href="https://jsfiddle.net/rdllngr/fszdh7js/5/" rel="nofollow">View DEMO</a></p>
  
  <p>I need to understand this condition to solve some problems.</p>
  
  <pre><code>&lt;style&gt;
      .relative,
      .absolute {
          height: auto;
          width: 200px;
          border: 1px solid black;
          margin: 10px;
      }
  
  .relative svg {
          position: relative;
  }
  
  .absolute svg {
          position: absolute;
  }
  &lt;/style&gt;
  
  
  &lt;!-- The height:auto works! --&gt;
  &lt;div class="relative"&gt;
      &lt;svg width="50" height="50"&gt;
          &lt;rect width="50" height="50" style="fill:rgb(255,0,0)" /&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;!-- The height:auto don't works --&gt;
  &lt;div class="absolute"&gt;
      &lt;svg width="50" height="50"&gt;
          &lt;rect width="50" height="50" style="fill:rgb(0,0,255)" /&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>