0
votes

Articles de conteneur Flex dépassant la largeur

Bonjour, j'ai un problème où mon conteneur dépasse la largeur maximale autorisée de mon conteneur flex (avec justifiant l'espace - entre)

Je divisai mes 3 enfants en 33,33%, mais cela dépasse donc la largeur: < / p>

img:

Entrez la description de l'image ici

My JSX **** : xxx

mon CSS: xxx

exemple:

https://codesandbox.io/s/long-monad-m54pu

Je ne trouve pas où je me suis trompé.


0 commentaires

3 Réponses :


0
votes

dans votre style.js retirez la largeur et la maxwidth de xxx

ou simplement n'utilisez pas de composant MXW80.

ou utilisez simplement des unités% ou VW au lieu de REM. https://www.sitepoint.com/unerstanding-and -utilisant-in-REM-UNITÉ-IN-CSS /


8 commentaires

Mais j'ai besoin que c'est mon conteneur.


J'ai besoin que ce CSS est mon conteneur avec une largeur maximale définie et j'ai un conteneur avec une largeur 100% flex entre lesquelles j'ai 3 enfants avec 33%


Utilisez une largeur différente qui correspond à la page. Utilisez la largeur 100% au lieu de 80REM


Mais j'ai besoin de centrer mon contenu sur une largeur maximale autre que 100 à l'écran.


Vous pouvez ajouter une autre enveloppe avec la largeur80 mais l'emballage principal doit être largeur 100%


Mais je fais déjà cela, j'ai une emballeuse principale avec 100% de largeur et celle-ci avec 80REM


Export const conteneurtop = styled.div` Position: relatif; largeur: 100%; Contexte: rouge; Box-Shadow: 0 0 5PX RGBA (18, 23, 39, 0,2); `;


Pourquoi utilisez-vous REM BTW? Pourquoi pas 80% au lieu de 80REM? sitepoint.com/unerstanding-and-upp-units -In-CSS , vous pouvez même aussi utiliser 80VW au lieu de%



1
votes

Vous devez contraindre la largeur du parent à l'intérieur du HTML et du corps. Je vous suggère de devoir utiliser 100VW pour l'élément parent au lieu de 100%


3 commentaires

Mais j'ai besoin de centrer mon contenu sur une largeur maximale autre que 100 à l'écran.


Le problème avec votre CSS est que le conteneur a la largeur 817px et le premier enfant de celui-ci (en tête d'oreille) a la largeur 1280. Vos articles sont effectivement centrés sur la tête, pas la conteneur qui a le fond rouge. Peut-être que je ne comprends pas correctement ce que vous voulez accomplir, mais si vous ajoutez `largeur: Fit-Contenu;` à votre conteneur de conteneur fixe votre problème


Fondamentalement, j'ai juste besoin de 3 enfants de largeur égale à l'intérieur de mon conteneur avec 80 REM 80 REM / 3



0
votes

Essayez d'utiliser la largeur dans 100% plutôt que dans rem xxx


8 commentaires

Mais j'ai besoin de cette largeur maximale pour centrer le contenu comme un conteneur de bootstrap et une rangée


Je pensais que c'était possible dans ces 80 REM pour diviser les 3 enfants en largeurs égales, essentiellement à l'intérieur de ce conteneur Flex, j'ai 3 enfants avec des largeurs égales = 100%


Justifiez l'espace de contenu entre Divide Egaly Egaly Son Childen Ans Vous utilisiez Align Article Center qui centralisent l'enfant. Donc, cela fonctionne comme conteneur de bootstrap ... alors pouvez-vous expliquer un peu waht actuellement que tu veux?


J'ai essentiellement un conteneur avec une largeur: 100% et j'ai une DIV avec 80 REM et cette div est flexible avec justifier entre et j'ai 3 enfants dedans avec des largeurs de 33% = 100% mais j'ai toujours ce problème de faire passer la écran.


C'est due à 80REM comme sa largeur fixe, lorsque vous jouez avec la conception réactive, la meilleure unité à utiliser est%


Merci% ou vw?


@MYKON Cela dépend de vous les deux fonctionne même, j'utilise surtout%% et n'a eu aucun problème en utilisant VW sur%%


Pour plus de précisions entre % et VW Visitez cette lien