CSS Triangle / Caret在应用overflow-y时删除

Question

我有一个应用了css三角形/插入符号的弹出窗口。弹出窗口的高度是动态的，因为输出是数据驱动的，我希望它在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属性以查看问题。

所需输出：具有滚动可行性

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