在存在或不存在错误消息的情况下，div包装器内的div的灵活高度

Question

我试图在存在和不存在错误消息，即“message-block”元素的情况下为'list-inline'元素指定高度。我尝试通过定义'list-inline'块的最小和最大高度来实现。但它对我不起作用。有人可以帮我这个。

场景一

情景二

.wrapper {
  height: 400px;
  width: 90%;
  background-color: #ece9ec;
}
.wrapper p.message-block {
  background-color: #eac1c1;
  padding: 5px;
  margin: 0;
}
.wrapper p.message-block button {
  float: right;
  background-color: transparent;
  border: none;
}
.wrapper .form-row {
  height: 20px;
  padding: 15px;
  background-color: #dff0d8; 
}
.wrapper .template-block {
  height: calc(100% - 78px);
  background-color: #fff; 
}
.wrapper .template-row {
  height: 20px;
  padding: 15px;
  background-color: #ddd;
}
.wrapper .template-block ul.list-inline {
    overflow-y: auto;
    height: calc(100% - 50px);
    margin: 0;
}

<div class="wrapper">
<p class="message-block"><i title="success Alert" class="success icon wi wi-done"></i><span ng-bind-html="messageContent" class="ng-binding">Message</span><button title="Close" type="button" class="btn-transparent close" ng-hide="hideclose" ng-click="dismiss({$event: $event, $scope: this})">×</button></p>
<div class="form-row"> Some block</div>
<div class="template-block">
  <div class="template-row">Another block</div>
  <ul class="list-inline"><li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li><li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  </ul>
</div>
  
</div>