Height issue?

There seems to be some kind of height issue.

by Blake Plumb

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-darkness/jquery-ui.css">
<div id="Select_Dialog">
    <div id="Select_Display">
        <div id="Select_List" class="ui-corner-all ui-widget-content">
            <div id="Select_ScrollContainer">
                <div id="Select_ScrollContent" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
                     <h3 class="ui-accordion-header ui-helper-reset ui-corner-all ui-accordion-icons ui-state-active ui-state-focus" role="tab" aria-expanded="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-circle-check"></span><a tabindex="-1" href="#"><div selectedindex="0" class="Select_Element"><div>Hello</div><div>Goodbye</div></div></a></h3>

                     <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-circle-close"></span><a tabindex="-1" href="#"><div selectedindex="1" class="Select_Element"><div>Hello</div><div>Goodbye</div></div></a></h3>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

#Select_ScrollContainer {
    overflow: auto;
    height: 450px;
}
#Select_ScrollContent{
    overflow: hidden;
}
#Select_List {
    padding: 0.5em;
}
#Select_Dialog {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 10px;
}

JavaScript

$(document).ready(function () {

    function fnDialogOpen() {
        var nHeight = $('#Select_ScrollContent')[0].scrollHeight;

        $('#Select_Dialog').dialog('option', 'title', 'Height is ' + nHeight);

        $('#Select_ScrollContainer').height(nHeight + 1); // Add one for rounding errors
        
       /* $('#Select_ScrollContent').append('<h3 class="ui-accordion-header ui-helper-reset ui-corner-all ui-accordion-icons ui-state-active ui-state-focus" role="tab" aria-expanded="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-circle-check"></span><a tabindex="-1" href="#"><div selectedindex="0" class="Select_Element"><div>Hello</div><div>Goodbye</div></div></a></h3>'); */
    }

    $('#Select_Dialog').dialog({
        autoOpen: true,
        draggable: true,
        resizable: true,
        modal: true,
        closeOnEscape: true,
        minHeight: 150,       
        minWidth: 450,
        open: fnDialogOpen
    });
});