Css 不带滚动条的可滚动ul元素

我尝试使用angular创建元素列表。该页面将成为手机上的一个应用程序。 列表本身可以有许多元素，因此我希望ul元素应该是可滚动的（“可滑动”）。我试着效仿一些例子，比如和

这是html代码：

<div class="container">
    <div id="spinner-icon" style="display:none">
        <span class = "icon-spinner"></span>
    </div>
    <div class="col-xs-12 indentation push-down bg-white" ng-repeat="cei in completeElementInfo">
        <div class="clearfix">
            <div class="pull-left">
                <h4>{{cei.description}}</h4>
                <p>{{cei.name}}</p>
            </div>
        </div>

        <div class="log-widget-list">
            <ul class="list scroller clearfix" id="elements-list">
                <li class="pull-left" ng-repeat="tinfo in cei.techInfo | orderBy: 'tinfo.sentTime'">
                    <h4 class="align-center">{{tinfo.elementShortCode}}</h4>
                    <div class="clearfix">
                        <span class="icon-clock pull-left"></span>
                        <span class="pull-right"> {{tinfo.sentTime}}min</span>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</div>

现在的问题是，我不希望水平滚动条出现，但它出现了，我不明白为什么。。。有什么想法吗？

演示

在此处更改了一些CSS：

 .log-widget-list {
    width: 200px;
    height: 300px;
    border: 1px solid #000;
    overflow: hidden;
}
.log-widget-list .scroller {
    width: 215px;
    height: 300px;
    overflow: scroll;
    padding-bottom: 15px;
    list-style-type: none;
}

在

中添加了
高度
和
填充底部
。在
中添加了滚动条
和
边框
。日志小部件列表

并增加了一些：

<span class="pull-right"> {{tinfo.sentTime}}min</span>

{{tinfo.sentTime}min

添加

溢出：在
#包装器中隐藏

CSS:

演示：
我把它。。。滚动条仍然可见。我正在尝试水平滚动。你有没有找到解决方法？
<span class="pull-right"> {{tinfo.sentTime}}min</span>

#wrapper {
 background: transparent;
 width: 550px;
 color: white;
 height:100%;
 overflow:hidden;
}