innerHeight on children() is wrong

by davidtong

HTML

<div id="outer">
    <div id="inner1"></div>
    <div id="inner2"></div>
    <div id="inner3"></div>
</div>
<p>outerHeight of #outer.children()</p>
<p id="children"></p>
<p>outerHeight of #inner1</p>
<p id="inner1info"></p>
<p>outerHeight of #inner2</p>
<p id="inner2info"></p>
<p>outerHeight of #inner3</p>
<p id="inner3info"></p>
<hr>
<p>scrollHeight of #outer.children()</p>
<p id="children1"></p>
<p>scrollHeight of #inner1</p>
<p id="inner1info1"></p>
<p>scrollHeight of #inner2</p>
<p id="inner2info1"></p>
<p>scrollHeight of #inner3</p>
<p id="inner3info1"></p>

CSS

#outer {border: 1px solid black;}
#inner1 {background: red; height: 100px; width: 50px;}
#inner2 {background: green; height: 200px; width: 50px}
#inner3 {background: blue; height: 300px; width: 50px}
#outer div {display: inline-block; margin-bottom: 50px;}

/* hide the first inner div */
div#inner1 {display: none;}

JavaScript

$('#children').text($('#outer').children().outerHeight());
$('#inner1info').text($('#inner1').outerHeight());
$('#inner2info').text($('#inner2').outerHeight());
$('#inner3info').text($('#inner3').outerHeight());


$('#children1').text($('#outer').prop('scrollHeight'));
$('#inner1info1').text($('#inner1').prop('scrollHeight'));
$('#inner2info1').text($('#inner2').prop('scrollHeight'));
$('#inner3info1').text($('#inner3').prop('scrollHeight'));