JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

/* 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;
}