[Résolu] <pre> dans flex-item = tout pété

Bonjour.

Dans une page construite avec une grille en flex, j'ai des problèmes avec les balise <pre>qui cassent la largeur automatique des flex-item malgré l'overflow: auto…

Le plus simple est de fournir une page de test pour voir le problème :
https://codepen.io/Ogham/pen/vYbpyGP

Quelqu'un aurait-il une idée d'une solution ?

NB : le problème ne se présente plus quand le flex-item à une largeur définie, mais le but est justement d'avoir une largeur variable…

Merci.
Modifié par Derwoed (17 Nov 2023 - 11:58)

Merci @gcyrillus.

Effectivement, dans ce contexte simpliste où le parent direct a une taille définie, cela fonctionne. Mais pas dans ma vraie page bcp plus complexe. Je vais donc mettre à jour ma page de démo pour me rapprocher de la réalité…

Ha haaaaaa !!!
Je le tiens !

Il y avait en fait un problème dans la structure de la page concernée. Sans rentrer trop dans les détails, j'ai plusieurs grilles imbriquées sur des templates de pages différents et sur cette page-là en particulier, j'ai un des flex-items (une colonne) qui n'avait pas de classe .col-xxx (classe qui définit la largeur et porte le max-width: 100% quand nécessaire). Cette classe semblait inutile puisque la colonne ici fait toute la largeur du conteneur, mais en fait non…

Encore merci @gcyrillus. Ta réponse m'a permis de décortiquer ma page et de trouver la faille (moi…)