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

在我的项目中，我从这里使用分层树：

看起来是这样的：

我正在使用递归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>

如何将滚动添加到此树？

---

提前感谢您的帮助

您是否在

ul

或

正文

等上尝试过

溢出

。？你能用inspector测试一下哪个元素需要

overflow

属性吗？是的，我试过了：“overflow:scroll”。一点效果都没有。你能给我们一个你的页面的url或者把它放在JSFIDLE中吗？这可能是css中的一个行高问题吗+1对于JSFIDLE，请使用。@jcunod不幸的是，整个项目只能在vpn连接下访问，并且关闭以供公众访问。此外，我正在使用Django框架，它具有模板的特定语法。我可以将代码复制并粘贴到jsfiddle，但这毫无意义，因为jsfiddle不理解django模板语言，也无法访问从中提取树节点名称的文件系统。

   <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>

<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>

.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;
}