title: HTML Container not expanding to inner-content height absolute positioning
body: <p>So,</p>
  
  <pre><code>&lt;div id="page-wrap"&gt;
    &lt;div id="main-content&gt;
      &lt;div id="main-content-inner"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>main-content has a relative positioning, page-wrap has default positioning, main-content-inner has absolute positioning.</p>
  
  <p>The problem is page-wrap height is not expanding to the height of main-content-inner.  main-content-inner displays just fine, but it is displaying outside the bounds of page-wrap. So if i set overflow to hidden on page wrap my main-content-inner gets cut off.  How do I make it so my page-wrap height expands to the tallest height of its children containers?</p>
  
  <pre><code>#page-wrap {
  width:100%;
  min-height:100%;
  height:auto;
  height:100%;
  margin-bottom:-20px;
  overflow:hidden;
  
  }
  
  #main-content {
  width: 100%;
  
  margin-left: -295px;
  position:relative;
  
  }
  #main-content-inner {
  left: 560px;
  border-radius:8px;
  border-style:solid;
  border-width:2px;
  border-color:#53D8FF;
  padding:20px;
  padding-bottom:0;
  background-color:#000000;
  position:absolute;
  top:100px;
  min-width:60%;
  max-width:60%;
  
  
  }
  </code></pre>