title: Adapt image to text vertically
body: <p>I have a text and an image. These must be adapted to a parent, to who I define a height, for example 100px</p>
  
  <p>The text have to fill what it need. It can be a simple phrase or a long paragraph, for this i can't define a fixed height.</p>
  
  <p>With the remaining space, I want to put a img, but when i put it, the images take the original img height size. You can see my snippet here:</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>.parent{
     height: 100px;
     width: 100%;
     padding: 10px;
     display: flex;
     flex-flow: column;
  }
  .parent img {
    flex: 1 1 auto;
  }
  .parent .textContainer{
    flex: 0 1 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
      &lt;img src="https://via.placeholder.com/250x250"/&gt;
      &lt;div class="textContainer"&gt;Text or html here&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Basically, what happens is that the image takes the height that the base image has, that is, if the image is 700px high, it takes 700px high and it goes out of the div, positioning itself as if it were positioned at absolute (it isn't ).</p>