Problème avec une image et Flexbox

Bonjour à tous et à toute,
Je rencontre un probleme avec les Flexbox et le tag <img/>.

J'ai trois rectangles dans mon exemple.
Le 1er se situe a gauche de l'écran. il a la particularité d'être redimensionner sur l'axe X. Il contient une image
Le 2eme se situe à droite de l'écran, il a une valeur fixe => width de 800px. Il à un backgroundcolor en vert
Le 3eme fait office de footer avec une hauteur de 90px. Il a un backgroundcolor en bleue

L'image se situe dans le CSS ==> Aucun probleme, lors du redimensionnement, mon 2eme rectangle reste avec une width de 800px et le rectangle n°1 avec l'image prends la place restante ....

Code ci-dessous

Mon HTML

<div class="main"> <div class="contain"> <div class="rectangle1"></div> <div class="rectangle2"></div> </div> <div class="rectangle3"></div> </div>

Mon CSS

body { margin: 0; } .main { height: 100vh; display: flex; flex-direction: column; } .contain { flex-grow: 1; display: flex; } .rectangle1 { flex-grow: 1; background-color: red; background: url("./image.png") center center no-repeat; } .rectangle2 { background-color: green; width: 800px; } .rectangle3 { flex-grow: 0; background-color: blue; width: 100%; height: 90px; }

Je change de méthode. Je supprime l'image du css et je le pace dans le html

Html

<div class="rectangle1"> <img src="./image.png" alt="" srcset="" /> </div>

Plus rien ne marche ....

• Plus de footer
• lors que je redimensionne, le width du rectangle 2 n'est plus constant... il va de 800px à 0px
• l'image ne se redimensionne plus...

je sèche ....

Merci d'avance pour vos solutions.