CSS 삼각형/캐럿 오버플로 -y 적용시 제거됨

Question

CSS 삼각형/캐럿이 적용된 팝업이 있습니다. 출력은 데이터 기반이기 때문에 Popover의 높이는 동적입니다. 150px 높이로 스크롤해야합니다.

overflow-y: scroll을 적용하면 캐럿이 사라집니다.

.rad { 
    background-color: #5c5c5c; 
    color: #ffffff; 
    position:absolute; 
    z-index: 1002; 
    padding: 5px 0; 
    box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.5); 
    border-radius:3px; 
    max-height: 150px; 
    //overflow-y: scroll; 
} 

.rad:after { 
    display: inline-block; 
    position: absolute; 
    top: 20px; 
    right: -10px; 
    content:''; 
    width 0; 
    height:0; 
    border-top:10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-left: 10px solid #5c5c5c; 
} 

여기에 문제의 FIDDLE가 있습니다. CSS에서 overflow-y 속성의 주석 처리를 제거하여 문제를 확인하십시오.

원하는 출력 : position: absolute를 제외하고, 그 자식 요소에 cabability 모든 .rad 스타일의 호텔을 (:after 포함)

Answer 1

(.rad 단일 div 하위 요소를 갖는다). 내 지식으로는 overflow을 다른 요소에 적용하지 않으면이를 처리 할 실제 방법이 없습니다.

JSFiddle :이 경우 http://jsfiddle.net/zzLega7g/9/

, 나는 콘텐츠에 대한 내부 래퍼로서 작동하고, 또한 오버 플로우의 스타일을 개최하는 div.content을 추가했다.

업데이트 CSS :

.rad { 
     background-color: #5c5c5c; 
     color: #ffffff; 
     position:absolute; 
     z-index: 1002; 
     box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.5); 
     border-radius:3px; 
    } 
    .rad .content { 
     overflow-y: auto; 
     max-height: 150px; 
     padding: 5px 0; 
    } 

Answer 2

이동 스크롤와 . 예를 들어, http://jsfiddle.net/zzLega7g/8/overflow-y: auto를 사용하여 임의의 방향으로 오버 플로우를 방지 불행한 부작용을 갖기 때문이다

.rad { 
    position:absolute; 
} 

.rad > *:after { 
    display: inline-block; 
    position: absolute; 
    top: 20px; 
    right: -10px; 
    content:''; 
    width 0; 
    height:0; 
    border-top:10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-left: 10px solid #5c5c5c; 
} 

.rad > * { 
    background-color: #5c5c5c; 
    color: #ffffff; 
    box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.5); 
    border-radius:3px; 
    overflow-y: scroll; 
    padding: 5px 0; 
    max-height: 150px; 
}