Scrolling child element inside parent?

Question

I have a parent element with two children. One child is a dynamic ul where admins will add and remove menu links as they please. The second child is a scrolling box with feeds inside. You can image it as a Twitter feed since that's what it reminds me of.

The problem I'm having is that since I cannot define the height of the first child, I can't get the second child to act right. I don't want scrollbars on the parent, but would like to have ay scrollbar on the second child once it reaches the end of the parent's bottom axis. So far I can get the parent to have a scroll bar and cut off the second child at the bottom access or I can get the second child to overflow completely out of the parent.

Thanks.

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