MD-LIST定数の高さ

Question

これをテンプレートとしてmd-listを使って簡単なチャットを実装したいと思います。 問題は、md-listに新しい項目を追加するとき（新しいメッセージをプッシュするとき）、md-listが増えているときです。

他のチャットと同様の動作をしたいので、チャットの高さは一定で、アイテムの数に関係なくチャットはYでスクロール可能ですので、ユーザーはスクロールで古いメッセージを見ることができます。

私は、この設定alread：

md-list{ 
    overflow-y: scroll; 
} 

をそして、いくつかの最大の高さの値にチャットのコンテナを設定していますが、リストには成長し、親のサイズの外に起こっています。

親がinit 400pxの高さにあるので、チャットもあります。私はメッセージを追加するとき、親は常に400ピクセルの高さを持っていますが、チャットは成長しています+ message.height。

修正方法？ チャットの初期高さと同じmax-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