flex box : overflow du child sur container parent?

17 octobre 2020 à 20:25:55

Tout est dit. J'ai découvert une chose bizarre: dans un container flex, j'ai mis en row 2 div, l'une de texte, l'autre avec une image. Et l'image a débordé du container!

Comment faire pour contraire une flex image à rester dans le cadre du container ? Je pensais que le container contraignait ses childs.D u coup, quelle est la solution ?

Exemple:

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style>
        .container{border:1px black solid;width:100%;display:flex;flex-direction:row;}
.img{max-width: 40%;}
.texte{max-width: 60%;}
    </style>
</head>
<body>
<div class="container">
    <div class="texte">hgedhgjzhdjhqdjhgqdhhhhdghqgdhdhgqdhdhhdjhdhdhdhbdhdhdhbdhdbhdhdhdjdkjdkjdkjdkjjkdhjhdljhdjhdljhdjhdjhdjhdhjdhjdhjhdjhdjhdhdhdhqdhqdhqhdqhdqhdhqdjhqdjhqgdhqhqdhqdhqdhqq</div>
    <div class="image"><img src="allauch.jpg" alt="test"/></div>
  </div>  

</body>
</html>

Lamecarlate

17 octobre 2020 à 20:34:00

Bonjour,

ceci est peut-être une solution à ton problème : https://raphaelgoetter.wordpress.com/2015/10/30/flexbox-a-casse-mes-images-responsive/

(par contre, teste avec du vrai texte, ne serait-ce que du lorem ipsum, car à part une ville au Pays de Galles il n'existe pas de mot aussi long )

Pas d'aide concernant le code par MP, le forum est là pour ça :)

xakula

17 octobre 2020 à 20:41:51

merci