title: Make an image resize depending on content inside a div
body: <p>I have a parent div with two other elements, one contains the text content, another may contain a picture. The picture and text might vary in size/length. I want the parent div to grow depending on the content but only up to a certain height. If there is an image I want the image to grow or shrink to make the parent div reach the max height. If there is no image, I want the parent div to shrink to contain the text. The image will be added via JavaScript. I have illustrated what I wanted to do in the following picture.
  <a href="https://i.stack.imgur.com/fyeU9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fyeU9.png" alt="illustration" /></a></p>
  <p>I was expecting the following code to work but the images seem to expand to be larger than the parent div. I have tried a few other things but I cannot seem to get it to work.</p>
  <p><a href="https://codepen.io/Jakieboi/pen/dyWNveQ" rel="nofollow noreferrer">Here</a> is a codepen.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;parent&quot;&gt;
    &lt;div id=&quot;text-body&quot;&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    &lt;/div&gt;
    &lt;div id=&quot;image&quot;&gt;
      &lt;img src=&quot;MayOrMayNotContainImg.com&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>#parent{
    max-height:400px;
    padding:10px;
    border: 2px solid black;
  }
  #text-body{
    padding:10px;
    border: 2px solid blue;
  }
  #image{
    padding:10px;
    border: 2px solid green;
  }
  
  </code></pre>
  <p>Any help would be highly appreciated, thanks in advance.</p>