Placement d'un texte

Bonjour à tous
Je suis actuellement en train de réaliser un sondage auprès de certaines personnes.
La question est "êtes vous intéressé à participer à cet évènement ?
Les réponses possibles sont "oui", "non", "je ne sais pas encore"
En plus les personnes peuvent ajouter un commentaire.
J'obtiens actuellement le résultat suivant (où j'ai flouté les images et les textes)

Quand on clique sur * en bas à droite de l'image, le texte de commentaire s'affiche sur un fond jaune qui disparait quand on clique dessus.
Mon problème:
la zone "réponse" se remplit en fonction des réponses reçues.
Selon le nombre de réponses et la taille de l'écran il est possible que le texte du commentaire déborde de l'écran.
J'ai déjà traité dans le passé le même problème en déclenchant un script js qui tient compte de la taille su texte et de la position de la <figure> à la quelle il est rattaché.
Ce que j'aimerais c'est une solution purement CSS à ce problème.
Auriez vous une solution à proposer ?
Merci de votre aide.

Comment c'est fait:
- chaque bloc de réponses est un <ul>
- chaque réponse est

  <li>
    <figure>
      <img le portrait de la personne>
     <figcaption> le nom de la personne
            <button>*
                 <aside>le commentaire></aside>
            </button>
      </figcaption>
    </figure>
</li>

L'apparition du commentaire est fait par un event listener sur le <button>, la disparition par un event listener sur l'<aside>
Modifié par PapyJP (08 Dec 2025 - 13:08)