JQuery () height doesn't change when resized

I have never had this problem before, but I can’t find a solution, so hopefully you guys can help me.

JQuery

function setTheHeight() {

    if( $('#main.level1 .block.attention .block-content').length ) {
        //Get value of highest element
        var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
            function() {
                return $(this).height();
            }
        ));
        console.log(maxHeight);
        $('#main.level1 .block.attention .block-content').height(maxHeight);
    }
}

setTheHeight();

$(window).resize(function() {
    setTheHeight();
});

Basically what this function does is check for the highest div and set the height of the entire selected div to that height. It works great. BUT this is a responsive design, so when a user resizes his browser, the content becomes smaller and the div is higher. So I added a resize event. The event leaves, but it does not change the height. Any idea why resizing doesn't change height?

Quick jsFiddle to show what's happening: http://jsfiddle.net/3mVkn/

Fix

, . (), , , , reset , .

:

function setTheHeight() {

    if( $('#main.level1 .block.attention .block-content').length ) {

        //Reset height
        $('#main.level1 .block.attention .block-content').height('auto');

        //Get value of highest element
        var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
            function() {
                return $(this).height();
            }
        ));
        console.log(maxHeight);
        $('#main.level1 .block.attention .block-content').height(maxHeight);
    }
}

setTheHeight();

$(window).resize(function() {
    setTheHeight();
});