为什么我的JavaScript生成树会被裁剪？

Question

在我的项目中，我使用了此处的分层树： http://javascript.ru/ui/tree

function tree_toggle(event) {
    event = event || window.event
    var clickedElem = event.target || event.srcElement

    if (!hasClass(clickedElem, 'Expand')) {
        return // клик не там
    }

    // Node, на который кликнули
    var node = clickedElem.parentNode
    if (hasClass(node, 'ExpandLeaf')) {
        return // клик на листе
    }

    // определить новый класс для узла
    var newClass = hasClass(node, 'ExpandOpen') ? 'ExpandClosed' : 'ExpandOpen'
    // заменить текущий класс на newClass
    // регексп находит отдельно стоящий open|close и меняет на newClass
    var re = /(^|\s)(ExpandOpen|ExpandClosed)(\s|$)/
    node.className = node.className.replace(re, '$1' + newClass + '$3')
}

它看起来像这样：

我使用递归Django模板生成这个树：

的index.html：

   <div style="position:fixed; width:300px;">
        <div onclick="tree_toggle(arguments[0])">
            <div id="tfheader">
                <form id="tfnewsearch" method="get" action="/help/search">
                        <input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="Поиск" class="tfbutton">
                </form>
                <div class="tfclear"></div>
            </div>
            <div style="overflow: scroll">
                <ul class="Container">
                    <li class="IsRoot">
                        <div class="Expand">

                        </div>

                        <div class="Content">
                            Содержание
                        </div>
                    </li>
                    {{ spaceless }}
                    {% include 'list.html' with data=list %}
                    {{ endspaceless }}
                </ul>
            </div>
   </div>

list.html：

<ul class="Container">
    <li class="Node ExpandOpen" style="overflow: scroll">
        <div class="Expand"></div>
        <div class="Content">
            <a href="/help/{{data.name}}">
                {{data.leaf}}
            </a>
        </div>
        {% for item in data.decendent %}
            {% include 'list.html' with data=item %}
        {% endfor %}
    </li>
</ul>

不幸的是，这棵树在窗户高度的末端播种，甚至没有向上或向下滚动：

此页面的我的css文件：

.Container {
    padding: 0;
    margin: 0;
}

.Container li {
    list-style-type: none;
}



/* indent for all tree children excepts root */
.Node {
    background-image : url(/media/pic/docs/i.gif);
    background-position : top left;
    background-repeat : repeat-y;
    margin-left: 18px;
    zoom: 1;
}

.IsRoot {
    margin-left: 0;
}


/* left vertical line (grid) for all nodes */
.IsLast {
    background-image: url(/media/pic/docs/i_half.gif);
    background-repeat : no-repeat;
}

.ExpandOpen .Expand {
    background-image: url(/media/pic/docs/expand_minus.gif);
}

/* closed is higher priority than open */
.ExpandClosed .Expand {
    background-image: url(/media/pic/docs/expand_plus.gif);
}

/* highest priority */
.ExpandLeaf .Expand {
    background-image: url(/media/pic/docs/expand_leaf.gif);
}

.Content {
    min-height: 18px;
    margin-left:18px;
}

* html  .Content {
    height: 18px; 
}

.Expand {
    width: 18px;
    height: 18px;
    float: left;
}


.ExpandLoading   {
    width: 18px;
    height: 18px;
    float: left;
    background-image: url(/media/pic/docs/expand_loading.gif);
}



.ExpandOpen .Container {
    display: block;
}

.ExpandClosed .Container {
    display: none;
}

.ExpandOpen .Expand, .ExpandClosed .Expand {
    cursor: pointer;
}
.ExpandLeaf .Expand {
    cursor: auto;
}

如何将滚动添加到此树？ 提前感谢您的帮助！