Flexbox div not taking the entire vertical space - html

Question

I'm having an issue with flexbox not filling spaces as I intend, I'm trying to see what I've been missing but couldn't wrap my head around it.
Below is a reproduction of my issue with a link to a codepen.
I need the div in the middle with class="artcl-description" to fill the remaining available space, taking into consideration the header and the footer and their content, I tried giving the parent (class="artcl-content-container") properties align-items: stretch; justify-content: stretch; but no bueno, I don't want to resort to hard coded height values and percentages if that's possible :/
html:
<div class="artcl-container">
<div class="artcl-content-container">
<div class="artcl-title-container">
<h1>Some Title</h1>
</div>
<div class="artcl-description">
<p>Why is this not taking the remaining height?</p>
</div>
<div class="artcl-footer">
<div>Some guy</div>
<div>
X/X/XXXX XX:XX:XX
</div>
</div>
</div>
<img class="artcl-thumbnail" src="https://picsum.photos/200" />
</div>
scss:
$article-height: 240px;
$pad: 16px;
body {
padding: 16px;
}
* {
direction: ltr;
margin: 0px;
}
.artcl-container {
height: $article-height;
background-color: black;
color: white;
font-family: sans-serif;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: row;
.artcl-thumbnail {
height: $article-height;
width: $article-height;
object-fit: cover;
}
.artcl-content-container {
flex: 1;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
.artcl-title-container {
padding: $pad;
border: dashed 1px wheat;
}
.artcl-description {
flex: 1;
padding: $pad;
border: dashed 1px wheat;
}
.artcl-footer {
padding: $pad;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: dashed 1px wheat;
}
}
}
Link to Pen

Answer 1

You forgot to add display: flex; to your class .artcl-content-container. I added it to your pen and it just works fine.