弹性框中的高度，弹性增长和最小高度表现不正常

Question

我遇到的问题是div具有可在flex-box内滚动的动态高度。下面的示例显示了正在发生的事情。

• 为什么height的像素单位不会在弯曲的框内翻译1:1？
• 为什么min-height的像素单位会在弯曲的框内翻译1:1？

您可以通过向.content.mid个元素添加更多内容来自行查看，min-height的框保留30px的高度，但height的框更小，随着flex-grow容器越来越大而越小。

这是在Chrome / 53.0.2785.143

上测试的

.content{
  display: flex;
  position: absolute;
  flex-direction:column;
  border: 1px solid black;
  left:10px;
  top: 10px;
  height:200px;
  width:300px;
}

.content div{
  border: 1px solid green;
}
.mid{
  flex-grow:1;
  overflow:auto;
}
.top,.bot{
  box-sizing: border-box;
  min-height:30px;
}
.content.bad{
  left:320px;
}
.top.bad,.bot.bad{
  min-height:auto; /* reset min-height */
  height: 30px;
}

<div class="content">
  <div class="top">actual height = 30px (with min-height)</div>
  <div class="mid">scrollable<br>a<br>b<br>c<br>d<br>e<br>f<br>f<br>f<br>f<br>f<br>f<br></div>
  <div class="bot">actual height = 30px (with min-height)</div>
</div>

<div class="bad content">
  <div class="bad top">actual height != 30px (with height)</div>
  <div class="bad mid">scrollable<br>a<br>b<br>c<br>d<br>e<br>f<br>f<br>f<br>f<br>f<br>f<br></div>
  <div class="bad bot">actual height != 30px (with height)</div>
</div>