[Résolu] Problème de flexbox

Bonsoir à tous
Je suis en train de modifier la façon de gérer les groupes d'images.
La méthode:
Le groupe est découpé en "lignes"
Pour chaque ligne le programme JavaScript calcule la hauteur d'image la plus petite
Au moyen d'une fonction faisant appel au "canvas" la taille des images est réduite si nécessaire pour que toutes les images d'une même ligne aient la même hauteur.

Le problème :

(les couleurs sont là pour matérialiser les éléments)
La structure est

<div class="cluster" ...>
    <figure class="row" ...>
        <figure class="diapo">
            <img ...>
            <figcaption>...<figcaption>
        </figure>
        <figure class="diapo"> ...</figure>
    </figure>
</div>

code couleur: jaune pour "cluster" vert pour "row"
On constate que, parce que le texte de la première image tient sur 2 lignes et celui de la deuxième image tient sur 1 seule ligne, la 2ème figure est moins haute que la première.

Le code CSS est

 .cluster .row {
	display:flex;
	justify-content:space-between;
	align-items:stretch;
	background:green;
}

Pour autant que je comprenne les flex-box, align-items:stretch; devrait faire en sorte que les deux <figure> aient la même hauteur.
La page de tests https://tests.osirisnet.net/tombes/pharaons/amenhotep3/test-amenhotep3_01.htm

Il doit y avoir quelque chose d'évident que je ne vois pas.
Il peut y avoir des interférences avec le CSS du contexte qui est assez complexe, mais je ne vois pas quoi.

Merci de votre aide
Modifié par PapyJP (26 Sep 2022 - 08:31)