<div class="conteneurRouge">

   <div class="contenuTexte"> Texte, texte texte texte, texte texte texte, texte texte texte, ...j'ai pas l'image ici (proxy youpi),</div>

   <div class="contenuVert">j'ai pas l'image ici  non plus (proxy youpi),</div>

</div>

*{margin:0px;padding:0px;font-size:1em;}



.conteneurRouge {

     display: flex;

     flex-direction: column;

     flex-wrap: nowrap;

     justify-content: flex-start;

     align-content: center;

     align-items: stretch;

 border:red 5px solid;

 width:90vw; /* vw pour "View Width", et 90 est un pourcentage / à remplacer par % si .conteneurRouge est dans une div */

 height:90vh; /* vh pour "View Height", et 90 est un pourcentage - Donc 90% de la hauteur de l'écran (Vue) */

 margin:auto;

   }



.contenuTexte {

     flex: 0 1 auto;  /*  0 pour dire qu'il garde la taille minimum*/

 padding:0.5em;

   }



.contenuVert {

     flex: 1 2 auto;  /*  1 pour dire qu'il prenne la plus grand taille par rapport aux autres "contenu" - et 2 pour qu'il puisse "+" se réduire plus que contenuText */

 background:rgba(0,255,0,0.2);

 border:5px solid green;

overflow:auto;

 margin:0.5em;

 padding:0.5em;

 border-radius:1em;

   }