max-height：img的100％不适用于嵌套div

Question

我正在尝试为图像设置max-height: 100%，这是在几个嵌套容器中。图像父母之一的高度以像素为单位。但是图像仍然超过了父母的身高。

出于不同目的，需要嵌套容器：

1. div.grid-container具有固定的宽度和高度（以像素为单位），以限制元素的整体大小。
2. div.image-container用于内部目的（fiters，镜像，javascript行为）。
3. img本身不得超过整体尺寸。

我认为如果其中一个父母有固定的身高，那么将max-height设置为任何内部元素都会将其高度限制为父亲的身高。不幸的是，这不起作用（参见摘录）。

我知道我可以设置图像的max-height像素（200px，作为网格容器高度），但是这个小部件是为在不同的地方使用而设计的，所以我事先并不知道它的容器精确高度，我只知道它是固定的。

如果不使用仅使用CSS的javascript，如何使图像不超过容器的高度？

/* page grid element- has fixed height and width */
.grid-container {
  width: 200px;
  height: 200px;
  background-color: green;
}
 
/* Image container - required for some purposes, must not exceed container size */
.image-container {
  outline: 5px solid red;
  max-width: 100%;
  max-height: 100%;
}

/* image must not exceed it's container */
img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

<h2>does not work - image height exceeds container's height</h2>
<div class="grid-container">
  <div class="image-container">
    <img src="http://via.placeholder.com/150x300">
  </div>
</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>

<h2>for width it works as expected</h2>

<div class="grid-container">
  <div class="image-container">
    <img src="http://via.placeholder.com/300x150">
  </div>
</div>