滚动父元素内的子元素？

Question

我有一个有两个孩子的父元素。 一个孩子是动态ul，管理员将根据需要添加和删除菜单链接。 第二个孩子是一个滚动框，里面有饲料。 您可以将其映像为Twitter提要，因为这是它让我想起的。

我遇到的问题是，由于我无法确定第一个孩子的身高，我无法让第二个孩子行动正确。 我不想在父节点上使用滚动条，但是当它到达父节点底轴的末尾时，它希望第二个子节点上有一个滚动条。 到目前为止，我可以让父母有一个滚动条并切断底部访问的第二个孩子，或者我可以让第二个孩子完全溢出父母。

谢谢。

<style>
.inline-block { display: inline-block; vertical-align: top; }
.nowrap { white-space: nowrap; }
#sidebar { width: 256px; padding: 11px 10px 10px; margin: 0 20px 0 0; border: 2px solid #969696; background: #e8e8e8; height: 636px; }
#ad_list { width: 244px; border: 1px solid #969696; padding: 6px 5px 5px; margin: 20px 0 0; overflow: auto; }
.ad_link { white-space: normal; margin-bottom: 10px; border-bottom: 1px solid #969696; padding-bottom: 10px; }
</style>

<aside id="sidebar" class="inline-block">
    <ul id="sidebar_links">
        <li class="link_button">Item 1</li>
        <li class="link_button">Item 2</li>
    </ul>
    <ul id="ad_list">
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
    </ul>
</aside>

Answer 1

只需在#ad_list添加一个高度即可。

#ad_list { height:500px; }