Flexbox strech élément sur l'axe secondaire

Bonjour à tous,

voilà mon problème, Un container flex a 3 enfants répartis sur 2 colonnes.

2 enfants sont dans la colonne de gauche et un enfant est dans la colonne de droite. L'enfant de la colonne de droite a une largeur connue.

Est-il possible que les enfants de la colonne de gauche occupent le reste de la largeur (voir l'exemple) et ce:
- sans modifier la structure du code HTML
- sans spécifier leur larguer

<section>
  <div class="col-gche">div 1</div>
  <div class="col-gche">div 2</div>
  <div class="col-drte">div 3</div>
</section>

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-end;
  width: 600px;
  height: 440px;
  border: 2px solid teal;
}

div {
  background-color: red;
  border: 1px solid white;
  padding: 10px;
  box-sizing: border-box;
}

.col-drte {
  width: 200px;
  height: 400px;
}

Merci d'avance

ced1860 a écrit :

- sans modifier la structure du code HTML
- sans spécifier leur larguer

C'est indispensable ?

Bonjour et merci Yordi.

Le 2ème point (sans spécifier leur larguer) est indispensable car sans ça il ne seraient plus flexible.

Pour le premier point (sans modifier la structure du code HTML) c'est moins catégorique mais la marge reste faible. l'affichage souhaité sur d'autre taille d'écran fait que je dois conserver, le

flex-direction: column

et qu'il ne peut pas y avoir de "wrapper" sur les colonnes de gauche (dans mon exemple j'ai mis le div 3 dans la colonne de droite, mais d'une fois sur l'autre ça peut très bien être les autres)

Peut-être que cela n'est tout simplement pas possible ? (avec ces contraintes)
En tout cas merci pour vos recherches

Hello,

Flexbox n'est pas prévu pour faire des miracles dans les deux sens de lecture à la fois, c'est le boulot de Grid Layout ça

"Le 2ème point (sans spécifier leur larguer) est indispensable car sans ça il ne seraient plus flexible."

Et une "longueur fluide", ça conviendrait ?

.col-gche {
  width: calc(100% - 200px)
}

Bonne chance

Effectivement c'est ce que j'utilisais en attendant de trouver mieux, et je vais m'en contenter.

Ce qui m'a fait persévérer c'est que dans mon apprentissage des flexblox - essentiellement grâce à votre livre - j'avais compris qu'il n'y avais plus d'axe vertical et horizontal mais un axe principal et secondaire. Or ce que je cherche à faire fonctionne quand l'axe principal est horizontal (flex-direction: row).

Dans tous les cas un grand merci pour votre réponse et du coup pour vos livres,
vivement une prise en charge "acceptable" du Grid Layout