div before, triangle go into the div if big content on it?

Question

I have a before triangle. It is over the div. The problem is, if the div has a big content it will go inside it.

https://jsfiddle.net/8pg4tcrc/1/

I'd like this triangle to be exactly over the div, be this div big or small. Any ideas why this error occurs?

#bellnews {  
 position: fixed; 
 width: 140px;
 min-height:100px;
 max-height:400px;
 background: #fff; 
 color: #000;
 border:1px solid #ccc;
 //box-shadow:0 3px 10px 0px #ccc;
 //border-top:none;
 z-index:3000;
}
#bellnews:before {
 content: '';
 vertical-align: middle;
 margin: auto;
 position: absolute;
 left: 0;
 right: 0;
 bottom: 93%;
 width: 15px;
 height: 15px;
 background: #fff;
 border-top: 1px solid #ccc;
 border-right: 1px solid #ccc;
 transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -webkit-transform: rotate(-45deg);
}

Thank you friends.