title: How to make child divs always fit inside parent div?
body: <p>My question is if there is a way, without using JavaScript, to cause child divs to extend to the borders of their parent, without exceeding those borders, when you cannot know beforehand the size of the parent div?</p>
  
  <p>Below is sample markup/styles demonstrating my issue. If you load it into a browser you will see that <code>#two</code> and <code>#three</code> both extend outside their parent, <code>#one</code>, and cause scrollbars to appear.  </p>
  
  <p>My issue is not so much the scrollbars, but that I do not know how to tell the child divs to occupy the width or height remaining to them, rather than the full height or width of the parent.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              html, body {width:100%;height:100%;margin:0;padding:0;}
              .border {border:1px solid black;}
              .margin { margin:5px;}
              #one {width:100%;height:100%;}
              #two {width:100%;height:50px;}
              #three {width:100px;height:100%;}
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="one" class="border"&gt;
              &lt;div id="two" class="border margin"&gt;&lt;/div&gt;
              &lt;div id="three" class="border margin"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>