html - 親内の子要素をスクロールしますか?

Question

2 つの子を持つ親要素があります。1 つの子は、管理者が自由にメニュー リンクを追加および削除できる動的 UL です。2 番目の子は、内部にフィードがあるスクロール ボックスです。それが私に思い出させるものなので、あなたはそれをTwitterフィードとしてイメージすることができます.

私が抱えている問題は、最初の子の高さを定義できないため、2 番目の子を正しく動作させることができないことです。親にスクロールバーは必要ありませんが、親の下軸の終わりに達したら、2 番目の子にスクロールバーを配置したいと考えています。これまでのところ、親にスクロール バーを持たせ、一番下のアクセスで 2 番目の子を切り取るか、2 番目の子を親から完全にオーバーフローさせることができます。

ありがとう。

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