溢出-y吃CSS属性

Question

我创建了一个带有长文本的div标签，所以我决定使用overflow-y：auto;但是应用它会消耗我的css属性，比如上三角形，以及我的浏览器中的发光效果。

查看小提琴，http://jsfiddle.net/SFVC3/

.message_box {
    position: absolute;
    top:80px;
    right:5px;
    width: 350px;
    height: auto;
    padding: 10px;
    background:#fff;
    visibility: hidden;
    max-height:400px;
overflow-y:auto;
    border:solid 1px #719ECE; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px;
    -webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
    -moz-box-shadow: 0 1px 10px rgba(113,158,206,0.8);
    filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
    z-index:9999;
}

.message_box:after, .message_box:before {
    bottom: 100%;
    border: solid transparent; 
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;

}

.message_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 9px;
    right: 10%;
    margin-right: -9px;    
}
.message_box:before {
    border-color: rgba(113, 158, 206, 0); 
    border-bottom-color: #719ECE;
    border-width: 10px;
    right: 10%;
    margin-right: -10px; 


}