Why doesn't flex item shrink, but div flex item does?

Question

Given the following markup and css (fiddle here), why does the second .bingo div comply to it's parents hight, but not the <img>?

<div class='root1'>
  <div class='child'>
    <img class='bingo' src="http://www.audubon.org/sites/default/files/styles/engagement_card/public/sfw_apa_2013_28342_232388_briankushner_blue_jay_kk_high.jpg?itok=ttMfUhUu">
  </div>
</div>

<div class='root2'>
  <div class='child'>
    <div class='bingo'></div>
  </div>
</div>

And css:

.root1, .root2 {
    display: flex;
    height: 150px;
    justify-content: center;
    flex-direction: column;
}
.root1 {
  background-color: lightgreen;
}
.root2 {
  background-color: lightblue;
}
.child {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
}
.bingo {
    display: block;
    object-fit: contain;
    flex-grow: 1;
    border: 1px solid black;
}

div.bingo {
  background-color: pink;
}