cta-card__text-wrapper:

Display: grid

Everything fits nicely. I am using outlines with different colors (black > red > blue > green) to keep track of how the parents are containing the children:

Истражи ја твојата креативност и талент со СкалаБиди дел од најновите активности во Скала, информирај се, инспирирај се и запознај се со нашите програми преку нашите настани и содржини.

cta-card__text-wrapper:

Display: flex / flex-shrink: 1

Notice how the children of cta-card__text-wrapper--flex (marked with green) are taller than their parent even though the height of the parent is 100% 

Истражи ја твојата креативност и талент со СкалаБиди дел од најновите активности во Скала, информирај се, инспирирај се и запознај се со нашите програми преку нашите настани и содржини.

cta-card__text-wrapper:

Display: flex / flex-shrink: 0

If I change the flex-shrink to 0, then the height of the parent is matched, but another problem arises that the button is pushed outside the frames of its container (black rectangle) 

Истражи ја твојата креативност и талент со СкалаБиди дел од најновите активности во Скала, информирај се, инспирирај се и запознај се со нашите програми преку нашите настани и содржини.

Challenge:

How to make the cta-card__text-wrapper extend its height to contain the height of its children, while keeping it in display: flex? (and possibly not hardcoding the text with a height value)

Истражи ја твојата креативност и талент со СкалаБиди дел од најновите активности во Скала, информирај се, инспирирај се и запознај се со нашите програми преку нашите настани и содржини.