应用过渡效应对角度动态高度的影响

Question

当用户将新项目添加到列表并且所有项目的高度高于容器div时，我尝试进行高度转换。

此处 HTML

<div class="outer-container">
        <div class="contner">
          <button type="button" (click)="add()">Click</button>
          <ul>
            <li *ngFor=" let nam of name "> {{name}}</li>
          </ul>
        </div>
</div>

CSS

 .contner {
     min-height: 242px;
     max-height: 100%;
     width: 604px;
     padding-top:10px;
     background-color: #FFFFFF;
     box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
     padding-bottom: 12px;
     transition: max-height .4s;
     -webkit-transition: .4s;
     position: relative;
     margin-left: auto;
     margin-right: auto;
     margin-top: 40px;
    }
.outer-container {
    display: flex;
    min-height: calc(100vh - 151px);
    width: 100%;
    align-items: center;
    justify-content: center;

}

我使用transition属性但是当max-height变大时不会应用。这是Demo