Since you’re working with a row-direction flex container, pinning the last item to the bottom is not possible. You’re dealing with cross axis space distribution, which means flex lines are either stretched or packed, and there’s no way to pin two items to the top and one to the bottom (unless you go beyond flexbox and use absolute positioning).
Here’s a complete explanation.
A simple and effective method to make your layout work would be a column-direction container with a flex auto margin on the last item. By aligning your items on the main axis you can space away individual items.
Here’s an explanation of flex auto margins:
/* FLEXBOX RELATED */
.grid {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.block {
flex: 0 24%;
display: flex;
}
.container {
display: flex;
flex-direction: column; /* new */
/* flex-flow: row wrap; */
/* align-items: flex-start; */
}
.title {
/* flex: 0 100%; */
}
.desc {
/* flex: 0 100%; */
}
.button {
margin-top: auto; /* new */
/* flex: 0 100%; */
/* align-self: flex-end; */
}
/* NO FLEXBOX RELATED */
.block {
background-color: #ccc;
}
.title {
font-size: 2rem;
font-weight: bold;
padding: 0.5rem;
text-align: center;
}
.desc {
background-color: grey;
padding: 0.5rem;
}
.button {
padding: 0.5rem;
color: blue;
text-align: center;
font-weight: bold;
}<div class="grid">
<div class="block">
<div class="container">
<div class="title">Title 1</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
<div class="block">
<div class="container">
<div class="title">Title 2</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
<div class="block">
<div class="container">
<div class="title">Title 3</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
<div class="block">
<div class="container">
<div class="title">Title 4</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
</div>