I have a unique problem with my flexbox layout. Each element within the flexbox contains a card that varies in height. Attempting to make the cards occupy the remaining space of their parent container causes them to overflow into the row below. Even setting all flex-children to 100% height results in the height collapsing into the size of the card itself.
#flex_parent {
margin: 1em;
display: flex;
flex-wrap: wrap;
}
.flex-child {
box-sizing: border-box;
margin-bottom: 1em;
width: 50%;
}
.full-height {
height: 100%;
background: #99F !important;
}
.child-description {
height: 100%;
}
/* cosmetic */
body {
background: black;
color: white;
}
h4 {
color: red;
}
.flex-child {
border: 1px dotted red;
}
.child-card {
background: #FFA;
color: #000;
}<body>
<div id="flex_parent">
<div class="flex-child">
<h4>Title title title</h4>
<div class="child-card">
<div class="child-description">
<p>123 123</p>
</div>
</div>
</div>
<div class="flex-child">
<h4>Title title title</h4>
<div class="child-card">
<div class="child-description">
<p>123 123<br>123 123</p>
</div>
</div>
</div>
<!-- more similar code blocks -->
</body>The full-height blue cards are indeed 100% the height of their parent, but this approach leads to overflow issues. Is there a way to expand them only to the bottom of their parent instead?