How can I set a height, or allow a div to extend to the height of absolutely position elements within?

Question

I have a container div with absolutely positioned elements within. Those elements are all variable heights. There are, however, a set number per row - but those rows are not defined in any way in the markup.

I am unable to amend the markup in any way as it is output from a library (masonry.js).

How can I - using CSS or JavaScript (jQuery is available) - extend the height of the parent div to match that of the children?

I have a fiddle running here showing the problem: http://jsfiddle.net/WZx4N/1/ - the desired effect is for the blue box to 'stretch' to the height of the red boxes. Remember though, that the boxes will be variable heights, so I cannot simply loop through the rows and add up the heights of the first column (see the example image below). Code for fiddle below:

CSS

.container{
    position:relative;
    background:blue;
    min-height:100px;
}
.box{
    position:absolute;
    width:75px;
    height:75px;
    margin:5px 5px;
    background:red;
    border:1px solid black;
}

HTML

<div class="container">
    <div style="top:0; left:0px;" class="box"></div>
    <div style="top:0; left:85px;" class="box"></div>
    <div style="top:0; left:170px;" class="box"></div>
    <div style="top:0; left:255px;" class="box"></div>
    <div style="top:0; left:340px;" class="box"></div>
    <div style="top:85px; left:0px;" class="box"></div>
    <div style="top:85px; left:85px;" class="box"></div>
    <div style="top:85px; left:170px;" class="box"></div>
    <div style="top:85px; left:255px;" class="box"></div>
    <div style="top:85px; left:340px;" class="box"></div>
    <div style="top:170px; left:0px;" class="box"></div>
    <div style="top:170px; left:85px;" class="box"></div>
    <div style="top:170px; left:170px;" class="box"></div>
    <div style="top:170px; left:255px;" class="box"></div>
    <div style="top:170px; left:340px;" class="box"></div>
</div>

Looping through each row and working out the height of the highest element will not work as the element below it may be much shorter, thus throwing the calculation off. Please see this example to see what I mean:

Please note: the other answers to this question found here are not applicable due to variable heights on my child divs, and because of the lack of my need for a pure CSS solution. As such I do not believe this to be a duplicate question and I have already searched other similar questions.

Answer 1

You can loop through the child elements to determine which one is the furthest from the top:

var height = 0;

$('.container > div').each(function() {
    var $this = $(this),
        bottom = $this.position().top + $this.outerHeight();

    if(bottom > height) {
        height = bottom;
    }
});

And then set the height to the sum of the top of that child and the height of that child.

$('.container').height(height);