J’ai voulu récemment créer un bloc enfant (item) d’une flexbox (display: flex), le besoin s’étant répété, je l’ai fait pour une flexbox horizontale (row) et une flexbox verticale (column).

Sur internet, on va vous dire d’utiliser flex-grow: 1;  mais dans les faits, cette directive, bien que répondant à la demande, n’est pas idéale car elle n’impose pas que l’élément enfant ne puisse pas dépasser la parent.

Votre parent a une taille définie, 100% ou une taille fixe, votre enfant commence à dépasser cette taille et pour vous, c’est normal, une scrollbar doit apparaître, c’est le comportement voulu.

 

 

 

 

 

 

Avec juste la directive flex-grow, cet élément va grandir et rendre votre parent plus grand qu’il ne devrait, max-width n’arrangeant rien.

Alors la solution est du coté de overflow avec un overflow: auto; sur l’élément enfant, qui au lieu de s’agrandir jusqu’à dépasser le parent, va se cantonner au contenu maximum offert par le parent, une scrollbar apparaît si nécessaire.

Maintenant, imaginons que vous ne voulez pas que cet enfant ait une scrollbar, c’est l’affaire d’un de ses enfants, lui coller à lui overflow: auto; ne va pas suffire, le parent continuera de s’étendre…
La solution est que l’élément enfant, directement enfant de la flexbox, ait lui un overflow à hidden, et non, ça ne va pas réellement masquer ce qui dépasse, mais ça va l’empêcher de dépasser si un de ses propres enfants à une propriété overflow à auto sur l’élément qui pousse à avoir une taille qui dépasse celle du parent.