부모 내부의 하위 요소 스크롤?

Question

두 자녀가있는 상위 요소가 있습니다. 한 어린이는 관리자가 원하는대로 메뉴 링크를 추가하고 제거하는 동적 인 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> 

Answer 1

#ad_list에 높이를 추가하면됩니다.

#ad_list { height:500px; }