Seems like you're trying to put the border around the content in box2
which is actually overflowing (meaning it's height property won't reflect the height of it's content).
Change the CSS to be height:auto
:
#box1, #box2 {
width: 20px;
height: auto;
background: #f00;
}
Then change your selector for the each:
element.find('*').each( function(index, child) {
//...
});
So you get the element box2
in the iteration because it's not a direct child of outer
.
Update: Alternative Solution
If you want to keep your CSS as you originally wrote it, you can find the scrollHeight
of the DOM element and use that to determine the height of the content inside of it in the case of an overflow.
Change this line:
var childMax=childPos.top+child.outerHeight();
To this:
var childMax=childPos.top+child[0].scrollHeight;