28168 sujets

CSS et mise en forme, CSS3

Bonjour à tous, question de CSS pure que je ne parviens pas à résoudre élégamment, si j'ai un conteneur en flex, avec "place-content: center" et que le contenu dépasse (taille supérieure au conteneur), malgré overflow: auto, le haut de mon contenu n'est pas atteignable par l'ascenseur (donc en position haute). En revanche en position basse (fin du contenu, donc), c'est bon.

Ce comportement est visible sur cette page :
https://jeu.sospel.info/Objets-Immeubles-Immeubles
en jouant avec la hauteur de la viewport après avoir affiché le menu des objets latéral (l’icône avec une loupe), mais j'avais déjà eu le problème plusieurs fois par le passé sans parvenir à solutionner ca sans bricolage douteux.

Comportement identique sous Chrome & Firefox.

Je vous remercie d'avance pour toute l'aide que vous pourrez m'apporter. Bonne fin de semaine à tous. Smiley cligne
Aaaaah miles mercis gcyrillus, une solution élégante et simple presque inespérée !
Complètement absente de la doc en Français ! Ce qui me fais réaliser que la version française n'est pas toujours complète. Smiley ohwell
En tout cas c'est très exactement ce que je cherchais alors encore un grand merci à toi. Question idiote, comment a tu pris connaissance de cette propriété ? Je veux dire c'est vraiment très obscur comme truc, un peu comme object-fit il y a quelques années (pour moi en tout cas Smiley cligne ).
Modérateur
C@scou a écrit :
Aaaaah miles mercis gcyrillus, une solution élégante et simple presque inespérée !
Complètement absente de la doc en Français ! Ce qui me fais réaliser que la version française n'est pas toujours complète. Smiley ohwell
En tout cas c'est très exactement ce que je cherchais alors encore un grand merci à toi. Question idiote, comment a tu pris connaissance de cette propriété ? Je veux dire c'est vraiment très obscur comme truc, un peu comme object-fit il y a quelques années (pour moi en tout cas Smiley cligne ).


Merci et de rien, c'est le pour quoi du Forum Smiley cligne
Dans mes bricoles, je me suis probablement trouvé comme toi dans les début de flex face à ce comportement à priori inattendu . D'abord en m'appuyant sur un simple margin:auto; pour m'affranchir du défaut puis ai cherché le comment du pourquoi sur la doc MDN en testant safe qui est maintenant bien compris.

Cdt
Ah oui avec margin auto ca donnait des résultats ? Je n'avais pas trouvé cette astuce.
Alors par contre pour rester dans l'expérimentation, j'ai tenté d'inverser (center safe, par exemple) et ca ne fonctionne absolument pas.