Javascript 如何使无序列表（ul）中的ng重复内容可滚动

我有一个无序列表中的邮件列表。我想给列表一个百分比的高度，并让它可以滚动。我试着给ul添加一个高度属性，但没有任何效果。
JSFiddle：
查看

<div ng-controller="MyCtrl">
    <h1>Chat</h1>
        <ul class="list-unstyled">
        <!-- List all messages -->
        <li class="col-xs-12 col-md-offset-4 col-md-4 chat-message" ng-repeat="message in chat_messages">
                <span ng-bind="message"></span>
            </div>
        </li>
    </ul>
</div>

---

使用CSS将高度设置为您想要的任何高度，但它必须短于列表默认高度，否则您将无法看到滚动条

ul.list-unstyled {
    height: 100px;
    overflow-y: auto;
}

---

如前所述，添加高度没有任何作用为什么它只在添加overflow-y:auto之后才起作用。身高不应该仍然起作用。要使它与百分比一起工作，你必须将身高设置为包括身体在内的所有父母

ul.list-unstyled {
    height: 100px;
    overflow-y: auto;
}