Contenu décalé et Flexbox

Bonjour,
Je suis en train de travailler sur le coté responsive d'un site client, et je me retrouve avec un petit bug que j'ai énormément de mal à corriger.
Coté mise en page, j'ai des blocs qui sont sur desktop en

display:flex;flex-direction:row;

Quand je passe en BP mobile, je met tout ça en

flex-direction:column;

Je regarde lance l'inspecteur Chrome sur mon ordinateur en mode responsive, même taille que mon téléphone , et le rendu est correct. Voyez plutôt :

Mon header

Ma présentation

Mes avis


Mais lorsque je regarde sur mon mobile (cache vidé), je tombe sur ces souçis :




Comme on peut le voir, le header est décalé, la flex-column des avis fait n'importe quoi, et tout le reste de mon contenu est décalé sur la gauche, sans aucune raison.
J'ai vérifié mes propriétés, aucune marge qui pourrait créer ce problème, j'avoue être perdu là .

J'ai regardé brièvement si des bug liés à flex-box auraient pu être la cause, mais je ne trouve pas .

Auriez vous une piste à me donner ?

Bonjour.

Difficile de dire quoi que ce soit sans plus de précisions mais le problème n'est peut-être pas lié à Flexbox directement : il prend en largeur toute la place qu'il peut mais peut-être que dans le cas du mobile, la largeur de votre conteneur n'est pas la totalité du viewport...

Ce n'est qu'une suggestion de ne pas vous focaliser totalement sur Flexbox...


Modifié par Zelena (18 May 2017 - 12:27)

J'ai résolu ce problème avec un overflow hidden sur le container.
Assez étrange d'ailleurs, car j'ai logé les largeurs d'absolument tout le noeud DOM , avec le code çi dessous et aucun élément n'avais une taille supérieur à la largeur du container.

$("*").each(function({
 console.log($(this).width());
});

Modifié par benjamin-derepas (18 May 2017 - 15:01)

Je ne dis que ce soit ça mais overflow : hidden a une autre particularité que de cacher ce qui dépasse. Elle provoque un contexte de formatage block.
https://www.alsacreations.com/astuce/lire/1543-Le-contexte-de-formatage-block-en-CSS.html

Hello,
as tu jeté un oeil sur la section "known issues" de cette page : http://caniuse.com/#feat=flexbox ?