title: How to set 100% height of a parent div with absolutely positioned children (not a duplicate)?
body: <p>Suppose an example:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;style type="text/css"&gt;
          html, body  { height:100%; width:100%; padding:0; margin:0; }
          body        { overflow:scroll; }
          #wrapper    { background:#5f9ea0; width:500px; height:100%; min-height:100%; margin:0 auto; overflow:auto; }
          #content    { background:#336699; width:400px; height:100%; min-height:100%; margin:0 auto; overflow-x:hidden; position:relative;}
          #info-block { background:#d2691e; width:300px; left:20px; position:absolute; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="content"&gt;
              &lt;div id="info-block"&gt;Info..&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;...End&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>There's couple of problems with this example:</p>
  
  <ol>
  <li>It puts scrollbars into the wrong place <code>#content</code> instead of <code>body</code>.</li>
  <li>The <code>body</code>, <code>#wrapper</code> nor <code>#content</code> get a proper height calculated. Expected is <code>522px</code> instead of <code>227px</code>. (screenshot below).</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/Yi68N.png" alt="Height of actual content is 522px">
  <img src="https://i.stack.imgur.com/9v2XZ.png" alt="Height calculated is 227px, which is wrong"></p>
  
  <p>So the actual problem is I need the page to get the height of the content of the <code>#info-block</code> element. Tried may different setting, all fail.</p>
  
  <p>The one solution that works - is using jQuery and comparing the height of the <code>#info-block</code> against the height of the <code>body</code>, and apply it recursively to the <code>body</code>, <code>#wrapper</code> and <code>#content</code>. But this is just wrong. Looking for CSS only solution.</p>
  
  <p>And, I can't get rid of <code>position:absolute</code> property of <code>#info-block</code> element, because it's a part of interactive horizontal accordion. </p>
  
  <p>Thanks in advance.</p>