How to make child img respect parent when it has items above - html

Question

I'm not able to make the img respect the parent's container when it has more items above it.
Html
<div class="box">
<h4>Some random text that will overflow the image</h4>
<div class="box2">
<img class="img" src="https://images-na.ssl-images-amazon.com/images/I/71Yd98vOJTL._AC_SY679_.jpg" alt="Poster not available"/>
</div>
</div>
CSS:
.box {
border: 1px solid;
border-radius: 3px;
margin: .3rem;
text-align: center;
padding: 2rem 0;
height: 300px;
}
.box2 {
border: 1px solid;
border-radius: 3px;
text-align: center;
height: 100%;
border-color: red;
display: inline-block;
box-sizing: content-box;
}
.img {
height: 100%;
width: 100%;
object-fit: contain;
box-sizing: content-box;
}
h4{
box-sizing: border-box
}
Fiddle: https://jsfiddle.net/dsxhy57k/1/
Image:

Answer 1

One way to achieve that is to use the CSS Flexible Box Layout combined with overflow: hidden
*{
box-sizing: border-box;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.box {
display: flex;
flex-flow: column;
border: 1px solid;
border-radius: 3px;
margin: .3rem;
height: 300px;
}
.box2 {
flex: 2 ;
overflow: hidden;
background-color: green;
border: 1px solid red;
border-radius: 3px;
padding: 1rem;
}
.box2 img{
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="box">
<h4>Some random text that will overflow the image</h4>
<div class="box2">
<img class="img" src="https://images-na.ssl-images-amazon.com/images/I/71Yd98vOJTL._AC_SY679_.jpg" alt="Poster not available"/>
</div>
</div>
An other would be using the calc function to set the height of your element .box2
.box {
border: 1px solid;
border-radius: 3px;
margin: .3rem;
text-align: center;
padding: 2rem 0;
height: 300px;
}
.box2 {
border: 1px solid;
border-radius: 3px;
text-align: center;
/*height: 100%;*/
height: calc(100% - 32px);/*here 32px is the space reserved for the h4, this cold well be the height of the h4*/
border-color: red;
display: inline-block;
box-sizing: content-box;
}
.img {
height: 100%;
width: 100%;
object-fit: contain;
box-sizing: content-box;
}
h4{
box-sizing: border-box
}
<div class="box">
<h4>Some random text that will overflow the image</h4>
<div class="box2">
<img class="img" src="https://images-na.ssl-images-amazon.com/images/I/71Yd98vOJTL._AC_SY679_.jpg" alt="Poster not available"/>
</div>
</div>