height: 100% not working when parent div only has max-height

Can't wrap my head around it! I try to make parent div to take no more than 80% height of the window with max-height, and child div to take all parent height minus something.

But height property in percents of the parent doesn't work for the child at all, unless I give parent height property.

Why is that?

Here is my simplified fiddle: https://jsfiddle.net/mbatcer/m2ohnsf5/ Why does inner div not respect parent height and go out of container?

HTML:

<div class="container">
  <div class="inner">
    <img src="http://via.placeholder.com/70x300">
  </div>
</div>

CSS:

.container {  
  background: blue; 
  padding: 10px; 
  max-height: 100px; 
}

.inner { 
  height: 100%;
  width: 70px;
  overflow: hidden;
}