Étirer en hauteur dans Flex, ce n'est pas height: 100%
Je retombe souvent dans le travers de penser en premier à height: 100% alors qu'il faut parfois utiliser align-self: stretch (ou selon le cas, align-self: normal, cf la doc MDN)
Si je crée cette "rangée" en Flex avec align-items: center, le div 2 ne peut pas prendre toute la hauteur, et height: 100% n'y change rien :
contenu 1 dont la hauteur est donnée par l'image
Heureusement, avec align-self: stretch, on peut contourner l'effet du align-items du parent :
contenu 1 dont la hauteur est donnée par l'image
Ensuite, si je veux rétablir le centrage du contenu 2 (qui était le but du align-items: center du parent), je peux appliquer au div 2 un display: flex et un align-items: center (mais pas un vertical-align: middle, encore un vieux réflexe obsolète 😬)
contenu 1 dont la hauteur est donnée par l'image