Image not taking parent height - html

Question

I have following html:
<div class='fullHeight'>
<div class='flexbox'>
<div class='first'>
<p>foo</p>
</div>
<div class='second'>
<p>bar</p>
<img src='http://www.mandysam.com/img/random.jpg'>
</div>
</div>
</div>
and css:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.fullHeight {
height: 100vh;
background-color: red;
}
.flexbox {
display: flex;
flex-direction: column;
height: 100%;
maxHeight: 100%;
width: 100%;
background-color: green;
}
.first {
background-color: magenta;
}
.second {
background-color: yellow;
flex: 1 1 auto;
max-height: 100%;
height: 100%;
widht: auto;
}
As long there is no image, everything works fine:
But as soon as a picture comes in, it overflows the container, instead of being shrinked to fit available height:
Codepen

Answer 1

You missed
display: flex;
flex-direction: column;
in your .second class, that's why the flex property isn't doing anything. Also it should be max-height instead of maxHeight and width instead of widht.
You can use background-image for your purpose.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.fullHeight {
height: 100vh;
background-color: red;
}
.flexbox {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-color: green;
}
.first {
background-color: magenta;
}
.second {
background-color: yellow;
display: flex;
flex-grow: 1;
flex-direction: column;
}
.container {
background-color: green;
flex-grow: 1;
background-image: url('http://www.mandysam.com/img/random.jpg');
background-size: contain;
background-repeat: no-repeat;
}
<div class='fullHeight'>
<div class='flexbox'>
<div class='first'>
<p>foo</p>
</div>
<div class='second'>
<p>bar</p>
<div class="container">
</div>
</div>
</div>
</div>

Answer 2

Add height and width properties to your image. Or just height. Maybe also object-fit: cover;
.second img {
height: 100%;
width: 100%;
object-fit: cover;
}

Answer 3

Using positions is the other solution but it's very risky and it depends on your plan for future code in this project!!
.second {
background-color: yellow;
flex: 1 1 auto;
max-height: 100%;
height: 100%;
widht: auto;
position:relative
}
.second img{
height: 95%;
width: 100%;
position:absolute;
bottom:0;
right:0;
}