CSS三角形/插入符號在應用溢出時刪除

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屬性以查看問題。

所需的輸出：與滾動cabability

Answer 1

這是因爲使用overflow-y: auto具有防止溢出在任何方向上的一個不幸的副作用。據我所知，如果不將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

全部移動.rad樣式屬性（包括:after）到其子元素，除了position: absolute。例如，http://jsfiddle.net/zzLega7g/8/（.rad具有單個子元素div）

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