Currently facing an issue where trying to make a child element take up 100% of the remaining height of its parent container causes the child's height to go beyond the boundaries of the parent.
HTML
.container {
height: 340px;
/* background-image: url(../images/topo-bg-3-black.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat; */
background-color: #DDDEDA;
display: flex;
align-items: center;
justify-content: center;
}
.container-wrap {
height: 200px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.content {
height: 100%;
width: 171px;
background-color: aqua;
}
.content-pic {
width: 100%;
height: 115px;
background-color: green;
margin-top: 5px;
}
.content-text {
background-color: red;
height: 100%;
width: 100%;
}<div class="container">
<div class="container-wrap">
<div class="content">
5 HOURS AGO
<div class="content-pic"></div>
<div class="content-text"></div>
</div>
</div>
</div>The code snippet can be found in this JSFiddle link.
I've tried using align-items: stretch; and other properties like position, as suggested in various forums, but still couldn't resolve the issue. The child element occupies 100% of the container's width correctly, but the height seems to be causing trouble, and I'm unsure about how to proceed.