How to make a div scale to the max height available? - html

Question

I have a div filled with a an image contained within another div spanning the top and bellow it a p, I would like it so that the image portion('child') spans to the max-height available without pushing the text out of the div, is this possible?
example code:
Html:
<div className='parent'>
<div className='child'>
<img/>
<p></p>
</div>
</div>
Sass:
.parent{
position: absolute;
width: 85%;
height: 85%;
background: white;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.2);
margin-left: auto;
margin-right: auto;
margin-top: 20%;
left: 0;
right: 0;
text-align: center;
border-radius: 7px;
overflow: hidden;
background: #7510f7;
.child{
display: flex;
width: 100%;
background: #141c3a;
height: 40vh;
overflow: hidden;
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: cover;
background-repeat: no-repeat;
margin: auto;
}
}
p{
text-align: left;
width: 95%;
margin: auto;
font-size: 0.9rem;
}
}

Answer 1

Currently as your child div has display: flex;, the img and p elements will be side-by side.
Adding flex-direction: column; to the child element might be what you want, see the below snippet (added border colours to tell elements apart)
.parent {
width: 85%;
height: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 20%;
text-align: center;
background: #7510f7;
border: red 1px solid;
}
.child {
display: flex;
width: 100%;
background: #141c3a;
height: 40vh;
border: orange 1px solid;
flex-direction: column;
}
img {
width: auto;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
margin: auto;
border: green 1px solid;
}
p {
text-align: left;
width: 95%;
margin: auto;
border: blue 1px solid;
}
<div class='parent'>
<div class='child'>
<img/>
<p>Lorem ipsum</p>
</div>
</div>
Update
Given your sandbox, here are the styles you need to add to get it how you want:
.Cards {
display: flex;
flex-direction: column;
.carousel-root{
flex:1;
}
.carousel, .slider-wrapper, .slider {
height: 100%;
}
.slide{
display: flex;
justify-content: center;
}
}