javascript - MD-LIST 恒定高度

Question

我想使用 md-list 作为模板实现一些简单的聊天。问题是当我向 md-list 添加新元素(推送新消息)时 md-list 正在增长。

我想让我的列表的行为与其他一些聊天类似，所以聊天高度是恒定的，与元素数无关，并且聊天可以在 Y 中滚动，因此用户可以通过滚动查看较旧的消息。

我已经设置好了:

    md-list{
  overflow-y: scroll;
}

并将聊天容器设置为某个最大高度值，但列表在增长，超出父级大小。

所以父级在初始 400px 高度上，聊天也是如此。当我添加消息时，父项的高度始终为 400 像素，但聊天正在增长 += message.height。

如何解决？我尝试添加与聊天初始高度相同的最大高度，但这不起作用。

有什么想法吗？

Answer 1

将具有固定高度的类添加到 md-list。

      <md-list class="fix-height">          
        <md-subheader class="md-no-sticky">3 line item (with hover)</md-subheader>
        <md-list-item class="md-3-line" ng-repeat="item in todos" ng-click="null">
          <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}">
          <div class="md-list-item-text" layout="column">
            <h3>{{ item.who }}</h3>
            <h4>{{ item.what }}</h4>
            <p>{{ item.notes }}</p>
          </div>
        </md-list-item> 
      </md-list>

CSS

.fix-height{
  max-height:200px;
  height:200px;
}

codepen here