Sandwich image between two paragraphs in fixed height container

Question

I need help on something from my personal project and I would appreciate any help. I have a fixed sized container which should look something like this: Image sandwhiched between two texts

Basically, I would want Text 1 and Text 2 to be the height of their content and Image to take up the rest of the height. I tried (among many other things) to set the parent container as a flexbox and giving the image a flex-basis of 0 and flex-grow of 1 but this results in a extremely thin image. All other attempts resulted in the image overflowing the container and Text 2 being pushed out as well.

Any idea of how to achieve what it is I want to do?

Answer 1

The trick is made by applying to container:

display:flex;
flex-direction: column;
flex-flow:column;

and then apply flex:1 to img-container to stretch for the whole height of the main container.

DEMO

.container{
  height: 1200px;
  display:flex;
  flex-direction: column;
  flex-flow:column;
}
.img-container{
  flex:1;
  overflow:hidden;
  position: relative;
}
.img-container img{
  height:100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at dolor pulvinar erat vehicula vulputate imperdiet quis massa. Morbi dignissim consequat erat rutrum fringilla. Aenean blandit, ante quis ultricies dapibus, enim massa gravida neque, non ultrices nulla sem ac nisi. Nunc sodales dapibus libero sagittis pulvinar. Vestibulum dignissim ex leo, vel hendrerit eros mollis eget. Fusce blandit tempus orci, in bibendum libero pellentesque at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis ultricies lorem. Duis vehicula, nisi et pellentesque sodales, turpis arcu lacinia dolor, sit amet iaculis eros nisi a ligula. Ut id consequat nisi. Suspendisse at arcu blandit, aliquet ex dictum, finibus justo. Maecenas ac sollicitudin urna, ut luctus mi. Duis laoreet risus vitae metus accumsan volutpat.</p>
  <div class="img-container">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at dolor pulvinar erat vehicula vulputate imperdiet quis massa. Morbi dignissim consequat erat rutrum fringilla. Aenean blandit, ante quis ultricies dapibus, enim massa gravida neque, non ultrices nulla sem ac nisi. Nunc sodales dapibus libero sagittis pulvinar. Vestibulum dignissim ex leo, vel hendrerit eros mollis eget. Fusce blandit tempus orci, in bibendum libero pellentesque at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis ultricies lorem. Duis vehicula, nisi et pellentesque sodales, turpis arcu lacinia dolor, sit amet iaculis eros nisi a ligula. Ut id consequat nisi. Suspendisse at arcu blandit, aliquet ex dictum, finibus justo. Maecenas ac sollicitudin urna, ut luctus mi. Duis laoreet risus vitae metus accumsan volutpat.</p>
</div>