Html 在父元素中滚动子元素？

我有一个有两个子元素的父元素。“一个孩子”是一个动态的ul，管理员可以随意添加和删除菜单链接。第二个孩子是一个滚动框，里面有提要。你可以把它想象成一个推特提要，因为这让我想起了它

我面临的问题是，由于我无法定义第一个孩子的身高，我无法让第二个孩子正确行动。我不希望在父级上有滚动条，但希望在第二个子级上有一个y滚动条，一旦它到达父级的底轴末端。到目前为止，我可以让父对象有一个滚动条，并切断底部访问的第二个子对象，或者让第二个子对象完全溢出父对象

谢谢

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

.inline块{显示：inline块；垂直对齐：顶部；}
.nowrap{空白：nowrap；}
#边栏{宽度：256px；填充：11px 10px 10px；边距：0 20px 0；边框：2px实心#969696；背景：#e8e8e8；高度：636px；}
#广告列表{宽度：244px；边框：1px实心#969696；填充：6px 5px 5px；边距：20px 0；溢出：自动；}
.ad#U链接{空白：正常；边距底部：10px；边框底部：1px实心#969696；填充底部：10px；}

只要给你的广告列表增加一个高度就可以了

#ad_list { height:500px; }

---

这将忽略动态第一个子对象的因子。一旦管理员添加了一个菜单项，正如在这个fiddle jsfiddle.net/D5kYS/3中看到的，底部的子项将再次溢出父项。我买了。通常我会先尝试用尽所有非javascript解决方案，但在这种情况下，我可以a）可能说没有css方法，b）控制所有管理员并告诉他们不要做一些愚蠢的事情，比如关闭javascript。或者，我也尝试使用iframe并将广告列表移动到它自己的HTML文档中。它在几个方面取得了成功，即父级中的滚动框，并增加了使编辑广告列表内容更容易的额外好处，但我还没有开始自动调整大小。但现在我有了这个，我又回到了原来的状态，它工作得很好。谢谢