CSS Div，带有滚动和三角形，如右侧的箭头

Question

我有一个div，需要为此显示一个箭头，当我不向其添加files属性时，它可以正常工作。

overflow: scroll

.description {
  position: relative;
  /* margin: 3em; */
  padding: 1em;
  box-sizing: border-box;
  background: white;
  color: black;
  border: 1px solid black;
  width: 170px;
  height: 100px;
  font-size: 11px;
  word-wrap: break-word;
  z-index: 1000;
  overflow: scroll;
  font-weight: bold;
}

.description::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin-left: -0.5em;
  bottom: -1em;
  left: 50%;
  box-sizing: border-box;
  border: 0.5em solid black;
  border-color: transparent transparent black black;
  transform-origin: 0 0;
  transform: rotate(-45deg);
  box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.4);
}

JSFiddle：http://jsfiddle.net/uzbe71hq/1/

我无法根据需要将位置从<div id="com" class="description"> Some text </div>更改为absolute，以定位div。

如您所见，箭头位于div内部而不是div外部。另外，如何显示div右侧的箭头？