Q:

How to fill rest of divs height with image?

I have three divs in one container div. Second of them has got only text and it's height is dynamic depending of text height. First and third has got images and I want to fill out the rest of height that those 3 divs have the same height. How to set height of image to fill out the rest of remaining height??
When I set height 100% to image and parent div has got e.g. 600px , image is getting 600px too and it's overflowing content.
.offer-container {
    display: flex;
    justify-content: space-between;
    > div {
      width: 30%;
    }

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

EDIT
<div className='offer-container'>
      <div>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum hic a nulla debitis adipisci cupiditate
              velit deleniti sint obcaecati? Ex quia illum id facere nulla dolores, cupiditate veniam explicabo
              excepturi?
            </p>
            <div>
              <img src='/images/bgc.png' alt='' />
            </div>
          </div>
    <div>text...</div>
    <div><img src='/images/bgc.png' alt='' /></div>
</div>

A:

Flex-grow fixed this problem

.parent{
  display: flex;
  justify-content: space-between;
}
.parent > div {
   width: 48%;
}
.parent > div:first-child {
   display: flex;
   flex-direction: column
}
.image{
  flex-grow: 1;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="parent">
  <div>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
          mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
          inventore ipsum. Voluptates.</p>
    
    <div class="image">
      <img src="https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg" alt="">
    </div>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
          mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
          inventore ipsum. Voluptates.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
          mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
          inventore ipsum. Voluptates.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
          mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
          inventore ipsum. Voluptates.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
          mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
          inventore ipsum. Voluptates.</p>
  </div>
</div>

