I have a row with boxes, each box containing content plus a "footer" element. I need to account for variable length text within the content as well as variable length text within the footer. Below is what I have achieved so far. Note that the card footers are of different heights, but I want them all the same:
section {
width: 90%;
max-width: 700px;
border: 1px solid #4D4E53;
border-radius: 2px;
padding: 10px 14px 10px 10px;
margin-bottom: 10px;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
grid-gap: 10px;
}
.card {
display: flex;
flex-direction: column;
border: 2px solid rgb(96, 139, 168);
border-radius: 5px;
}
.card .content {
flex: 1 1 auto;
padding: 10px;
object-fit:contain;
//min-height:0;
}
footer {
background-color: rgba(96, 139, 168, .2);
padding: 10px;
display: block;
flex: auto;
}<html>
<head>
</head>
<body>
<section>
<div class="cards">
<div class="card">
<div class="content">
<p>This card doesn't have much content.</p>
</div>
<footer>Card footer</footer>
</div>
<div class="card">
<div class="content">
<p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
</div>
<footer>Longer card footer - text wraps onto thte next line</footer>
</div>
<div class="card">
<div class="content">
<p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
</div>
<footer>Card footer</footer>
</div>
</div>
</section>
</body>