Scaling image to fit flexbox layout

Question

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.

The desired result at different sizes, as a reference:

Here's my current situation: https://codepen.io/anon/pen/aGPPaq

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;
}

<div class="container">
  <div class="main">
      <img class="image" src="https://picsum.photos/400/600?image=28">
    
    <div class="text">
      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. 
    </div>
  </div>
  <div class="footer">
    Footer content (variable height)
  </div>
</div>

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:

.main {
  /* ... */
  position: relative;
}

.image{
  position: absolute;
  height: 100%;
}

I can't seem to figure out how to achieve this seemingly simple layout. Anyone got any advice?

Thanks!

Answer 1

In your code only I have added the changes...I have added the width as 50% but You can change the width of image as per your requirement..

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; */
 width:100%;
  
  background: yellow;
}

.image{
  height: 100%;
  width:50%;
}

.text{
  background: lightblue;
}

<div class="container">
  <div class="main">
      <img class="image" src="https://picsum.photos/400/600?image=28">
    
    <div class="text">
      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. 
    </div>
  </div>
  <div class="footer">
    Footer content (variable height)
  </div>
</div>

Answer 2

You can do something like this. you need to set vh unit (Viewport Height) for image height. but you also need to exclude your footer height from image if want no scroll.

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;
  
  
  background: yellow;
}

.image{
  height: calc(100vh - 18px);
  width: auto;
}

.text{
  background: lightblue;
}

<div class="container">
  <div class="main">
      <img class="image" src="https://picsum.photos/400/600?image=28">
    
    <div class="text">
      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. 
    </div>
  </div>
  <div class="footer">
    Footer content (variable height)
  </div>
</div>