I can't seem to get flexbox to fill the spaces as I want it to. I've been trying to figure out what I'm missing, but I just can't wrap my head around it. Here's a recreation of the issue with a link to a codepen. I want the div in the middle with
class="artcl-description"class="artcl-content-container"align-items: stretch; justify-content: stretch;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;
}
}
}