title: Scaling image to fit flexbox layout
body: <p>I am working on a page layout using flexbox. The page contains an image, a div with text, and a footer div. The image and the text div should be side by side. I want the image to scale to fill the height of the parent div (div with class .main), while maintaining its original aspect ratio. The text div will take up the remaining horizontal space. The footer will be on the bottom.</p>
  
  <p>The desired result at different sizes, as a reference:
  <a href="https://i.stack.imgur.com/KODBa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KODBa.png" alt="Desired result 1"></a>
  <a href="https://i.stack.imgur.com/LEVbq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LEVbq.png" alt="Desired result 2"></a></p>
  
  <p>Here's my current situation:
  <a href="https://codepen.io/anon/pen/aGPPaq" rel="nofollow noreferrer">https://codepen.io/anon/pen/aGPPaq</a>
  <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>body{
    margin: 0;
  }
  
  .container{
    position: absolute;
    min-height: 100%;
    
    display: flex;
    flex-direction: column;
    
    background: lightgrey;
  }
  
  .footer{
    flex-grow: 0;
    flex-shrink: 0;
    
    background: lightpink;
  }
  
  .main {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    height: 100%;
    
    background: yellow;
  }
  
  .image{
    height: 100%;
  }
  
  .text{
    background: lightblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="main"&gt;
        &lt;img class="image" src="https://picsum.photos/400/600?image=28"&gt;
      
      &lt;div class="text"&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque sem, congue nec malesuada ac, cursus eu metus. Aliquam euismod malesuada massa, ac iaculis nunc mollis nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dictum finibus magna, nec lacinia lacus euismod ut. Nam non tellus odio. Morbi condimentum finibus scelerisque. Aenean semper, erat faucibus fringilla faucibus, lectus turpis congue lorem, nec consequat arcu magna eu felis. Praesent eget quam velit. Nam in sapien ut augue imperdiet convallis. 
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;
      Footer content (variable height)
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I found that scaling the image is possible using absolute positioning of the image, but this way the text won't be pushed to the right (the image will overlay the text). The css for this:</p>
  
  <pre><code>.main {
    /* ... */
    position: relative;
  }
  
  .image{
    position: absolute;
    height: 100%;
  }
  </code></pre>
  
  <p>I can't seem to figure out how to achieve this seemingly simple layout. Anyone got any advice?</p>
  
  <p>Thanks!</p>