Image in flex-row layout ignores it’s allocated height - css

Question

I want to have a container that includes an image and a caption.
The container should always be the same size, the caption height might change.
In my mind the caption should get the auto height, depending on it’s size and the rest of the containers height will be allocated to the image.
I tried doing that with a div and i worked flawlessly. When I exchange the placeholder div with an actual image tag, the image will take the 100% height of the container, not of its allocated flex space in the container.
Why is that and how can I fix it?
Example showing the difference between div and image tag:
https://codepen.io/lkssmnt-the-lessful/pen/QWqbxNK?editors=1100
.project {
height: 500px;
width: 500px;
display: flex;
flex-direction: column;
}
.project img {
height: 100%;
width: 100%;
object-fit: cover;
}

Answer 1

Add overflow: hidden to the .img tag. - This has the negative effect of snipping the bottom of the image off, however.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.project {
height: 500px;
width: 500px;
border: 5px solid red;
margin: 1rem;
display: flex;
flex-direction: column;
}
.project p {
padding: 1rem;
}
.project img {
overflow: hidden;
height: 100%;
width: 100%;
object-fit: cover;
}
.project .test {
height: 100%;
width: 100%;
background: beige;
}
<div class="wrapper">
<div class="project">
<div class="test"></div>
<p>Project 1</p>
</div>
<div class="project">
<img src="https://images.unsplash.com/photo-1518676590629-3dcbd9c5a5c9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80">
<p>Project 2</p>
</div>
</div>