title: Resize Child Div to fit within Height bounds of parent div
body: <p>I think the problem I'm having is using SVG elements which automatically size to their container if the height and width is not set, which is the desired behavior. I need a way to automatically size the child div to never exceed the height of the parent container. I tried <code>position:absolute; top:0; bottom:0;</code> hoping it would work but it did not. Here is my code sample:</p>
  
  <p><code>html</code>:</p>
  
  <pre><code>&lt;div id='container'&gt;
      &lt;div id="logo"&gt;
      &lt;svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400.168 177.975" enable-background="new 0 0 400.168 177.975"
          xml:space="preserve"&gt;
              &lt;path d="M150 0 L75 200 L225 200 Z" /&gt;
      &lt;/svg&gt;
  </code></pre>
  
  <p><code>css</code>:</p>
  
  <pre><code>#container {
      width: 100%;
      padding-bottom:40%;
      background-color:red;
      position:relative;
  }
  #logo {
      margin-left:auto;
      margin-right:auto;
      text-align:center;
      position:absolute;
  }
  </code></pre>
  
  <p>My container logo has a svg as well, which is why it resizes but always maintains the width of the page (the limiting factor to maintain aspect ratio). Is there a way to keep my child div <code>id='logo'</code> restrained to the bounds (height and width) of div <code>id='container'</code>?</p>
  
  <p><a href="http://jsfiddle.net/chipChocolate/0pgefayc/2/" rel="nofollow">Relevant fiddle</a>.</p>
  
  <p>Edit: Solution is to set a width first at a rate you're happy with (percentage of parent div) and set height to auto. It is true that height is not calculated unless specified. </p>