How to fill rest of divs height with image? - html

Question

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>

Answer 1

Hey this would solve your problem:
.parent{
display: flex;
}
.child {
width: 350px;
}
.class-1 {
display: flex;
flex-direction: column;
}
#image{
width: 90%;
height:100%;
overflow: hidden;
flex-grow : 1;
position: relative;
}
#image img {
width: 100%;
height: auto;
position:absolute;
}
<div class="parent">
<div class=" child class-1">
<div class="text">
<p>asdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj flksadj flksadj flkasdj flkasdjfklasdj flkasdjflkas jflksadj lkasjfklasdj f</p>
</div>
<div id="image">
<!-- <div class="for-image" style = "background-image:url('https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg')"> -->
<img src="https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg" alt="">
</div>
</div>
<div class=" child 2">
<p>asdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj lkasjfklasdj fasdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj flksadj flksadj flkasdj flkasdjfklasdj flkasdjflkas jflksadj ldj flksadj flksadj flkasdj flkasdjfklasdj flkasdsadsads a das d aasdsadsaddasd as asd asd s ds das das das d ads asd asasdjflkas jflgsdvxzvxzcvzxcvzxv</p>
</div>
</div>
if you want to fiddle around here is the codepen link

Answer 2

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>