title: max-height: 100% for img does not work in nested divs
body: <p>I am trying to set <code>max-height: 100%</code> for image, that is inside several nested containers. One of image's parents has height in pixels. But image still exceeds parent's height.</p>
  
  <p>Nested containers are required for different purposes:</p>
  
  <ol>
  <li>div.grid-container has fixed width and height in pixels to limit overall size of the element.</li>
  <li>div.image-container is used for internal purposed (fiters, mirror, javascript behavior).</li>
  <li><code>img</code> itself just must not exceed overall size.</li>
  </ol>
  
  <p>I thought that if one of parents has fixed height, then setting <code>max-height</code> to any internal element will limit it's height to parent's height. Unfortunately this did not work (see the snippet).</p>
  
  <p>I know that I can set image's <code>max-height</code> in pixels (200px, as grid-container height), but this widget is designed for using in different places, so I do not know it's container exact height beforehand, I only know it's fixed.</p>
  
  <p>How do I make the image not to exceed container's height without using javascript, with CSS only?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;does not work - image height exceeds container's height&lt;/h2&gt;
  &lt;div class="grid-container"&gt;
    &lt;div class="image-container"&gt;
      &lt;img src="http://via.placeholder.com/150x300"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  
  &lt;h2&gt;for width it works as expected&lt;/h2&gt;
  
  &lt;div class="grid-container"&gt;
    &lt;div class="image-container"&gt;
      &lt;img src="http://via.placeholder.com/300x150"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>