title: scale floated content to fill container
body: <p>I have an HTML div with fixed width and height, containing nested divs arranged with 'float: left'. I'd like to scale the nested divs so they fill the container (with left over space following the final nested element as usual. In other words, I'd like the nested elements to be as large as possible without overflowing the container.</p>
  
  <p>Sample starting point:</p>
  
  <pre><code>&lt;div style="position: relative; background-color: blue; border: 1px solid yellow; width: 650px; height: 500px; margin: auto;"&gt;
      &lt;div style="position: relative; background-color: red; border: 1px solid magenta; width: 200px; height: 150px; margin: 5px; float: left;"&gt;&lt;/div&gt;
      &lt;div style="position: relative; background-color: red; border: 1px solid magenta; width: 200px; height: 150px; margin: 5px; float: left;"&gt;&lt;/div&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>(styles inlined for brevity)</p>
  
  <p>The content divs must be resized with their aspect ratio intact; neither the number of divs nor the size of the container are known in advance.</p>
  
  <p>Since CSS doesn't provide a means to auto-size floated content in this manner, I'm doing it in JavaScript, but can't find a suitable algorithm for calculating the target size of the content divs; I suspect I need to do something clever with the relative aspect ratios of the container and content elements, but I can't think of anything that would work...</p>