Initially, the value set is "stretch" instead of "start," which is a mistake in the documentation. Changing it to "start" actually alters the value from "stretch."
This situation is not a glitch but rather a result of the image's percentage-based max-height being calculated before the parent element's (the grid item's) height is established. This leads to treating it as "max-height: auto," resulting in a larger image display.
The reason for the smaller image appearing when the grid item's -ms-grid-row-align is set to "stretch" is that this setting adjusts the item's height to match the row's height (44px in this case), allowing the percentage-based max-height of the image to be resolved correctly.
A similar behavior can be observed without using Grid:
<div style="max-height:100px;"><img id="img" style="max-height:100%" src="/picture000.png"/></div>
Although your explanation is somewhat unclear, you may want to consider making the image itself a grid item to align its percentage max-height with the grid row. It is important to include "-ms-grid-column-align: start" to prevent stretching and distortion:
<div style="width:300px;display:-ms-grid;-ms-grid-rows:44px 44px">
<img style="max-width:100%;max-height:100%;-ms-grid-row:1;-ms-grid-column:1;-ms-grid-row-align: start;-ms-grid-column-align: start;" src="/picture000.png"/>
<div style="-ms-grid-row:2; -ms-grid-column:1">hola mundo</div>
</div>
Note: I am part of the team responsible for Microsoft's CSS Grid implementation.