Height, flex-grow, and min-height not behaving correctly in flex-box

Question

I was having issues with a div that has a dynamic height that is scrollable inside a flex-box. The sample below shows what is happening.

• Why don't the pixel units of height translate 1:1 inside a flexed box?
• Why DO the pixel units of min-height translate 1:1 inside a flexed box?

You can see for yourself by adding more content to both .content.mid elements, the box with min-height retains it's height of 30px yet the box with height gets smaller and smaller as the flex-grow container gets bigger and bigger.

This was tested on 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>