How to get a div in Flexbox to take all the remaining space

Envato Customers Web and Code
1

Hello folks,
I am building an e-shop and I have a slight problem. I made the items appear as polaroids. The code is here ->https://codepen.io/Stefany93/pen/VWaKYj
As you can see all is fine, but the height of the images varies from item to item but their width is the same - however since the image height varies, there is big white space in the description, where the title of the item appears.
I want to vertically center the title below the image. I tried everything but since the div below the image doesn’t fill in all the remaining space, I cannot make it centered.

Using the line-height trick is not an option because most of the titles will be with two lines and also I dont know how much white space there will be off the bat.

Thank you!

2

You can make it by making your polaroid item also a flexbox:

div.polaroid {
  display: flex;
  flex-direction: column;
}
.polaroid-container {
  margin-top: auto;
  margin-bottom: auto;
}
3

Genius! Thank you soooo much!