stretching div to fit content, height dictated by image width - html

Question

I ran into problem, I'm CSS newbie and can't figure it out how to dynamically stretch comment section to fit height.
Height of right div is dictated by image width, so I cant set static height of right div, also can't set min-height and max-height on comment div, because it will not fit on bigger picture.
What I want is somehow to fit comment section that has height of like 50% correlating to height of parent div.
Any ideas how to make it work ? Some ideas would be enough to look into right direction. Don't care about old IE versions, so newest CSS additions are viable, and javascript is also an option if it's hassle to do with css.
<div class="post-container">
<div class="image-container">
<div class="image-holder">
<img class="image" src="http://www.onionlegal-fortstjohn.ca/wp-content/uploads/2015/03/300x600-Half-Page-Display-Ad-Placeholder.jpg"/>
</div>
</div>
<div class="post-details-container">
<div class="header">
<div class="image-container">
<div class="image-holder">
<img
class="profile image"
src="https://i.stack.imgur.com/7lf40.gif"
/>
</div>
</div>
<ul class="comments-container">
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
<li class="comment">
<span>
author
</span>
<span>
This is comment text
</span>
</li>
</ul>
<div class="footer">
FOOTER ALWAYS ON BOTTOM
</div>
</div>
CSS
.post-container {
display: flex;
border: 1px solid #e6e6e6;
flex-direction: row;
max-width: 906px;
background-color: #fff;
}
.header {
padding-bottom: 15px;
padding-top: 15px;
margin-right: 20px;
margin-left: 20px;
flex-direction: row;
align-items: center;
}
.image {
height: auto;
width: 100%;
height: auto;
max-width: 100%;
}
.profile {
width: 45px;
height: 45px;
border-radius: 50%;
}
.comments-container {
list-style-type: none;
margin: 0;
padding: 0;
max-width: 280px;
}
.comment {
margin-bottom: 15px;
}
.footer {
bottom: 0;
position: fixed;
}

Answer 1

If the image and the comment section are siblings then
Remove any height attribute(min-height, max-height, height)
Give display: flex; to their parents and
Give align-items: stretch to comment section.
I may make any mistake cause this kind of question should have demo link or you should share your html and css here.

Answer 2

Additional Problems:
Header Tag is not closed.
Footer need not required to be fixed.
Solution:
Add a closing div tag before .comments-container
Remove css for .footer
Make .post-details-container display as flex and direction as column
Set .comments-container to flex-grow as 1
Working code at https://jsfiddle.net/ou21qe09/
.post-details-container {
display: flex;
flex-direction: column;
}
.comments-container {
flex-grow: 1;
}