web-dev-qa-db-fra.com

Les largeurs de flexbox IE10 incluent le remplissage, ce qui provoque un débordement. boîte-dimensionnement: border-box ne résout pas

Dans cet exemple, l'enfant flex LHS a un remplissage de 1em et RHS débordera du parent:

<div style="display: -ms-flexbox; box-sizing: border-box; width: 200px; border: 5px solid black">

    <div style="padding: 1em; -ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 33%; background-color: blue; box-sizing: border-box">
        LHS
    </div>

    <div style="-ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 67%; background-color: red; box-sizing: border-box">
        RHS
    </div>

</div>

Voici le violon:

http://jsfiddle.net/GY4F4/6/

Comment puis-je éliminer le débordement lorsque les enfants Flex ont un rembourrage? box-sizing: border-box ne fonctionne pas.

csscss3flexboxinternet-explorer-11internet-explorer-10
24
Graeme Pyle

J'ai eu des problèmes similaires avec flexbox et box-sizing: border-box;. Ce dernier ne semble tout simplement pas fonctionner dans IE. La largeur ne fonctionnerait pas dans ce cas car le remplissage le changerait - mais si vous pouvez utiliser max-width, cela devrait résoudre le problème.

22
smogg

Dans IE flex-basis ne compte pas pour box-sizing:border-box. C'est un bogue connu comme décrit ici: https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box

Bien que cela ait été corrigé dans Edge maintenant.

Quelques corrections:

  • Appliquez une marge négative sur son conteneur pour lutter contre le remplissage de l'enfant
  • Utilisez flex-basis: calc($basisValue - $paddingValue) ← cela a fonctionné mieux pour moi
  • Utilisez des pseudo-éléments au lieu de padding, les pseudo-éléments ne comptent pas comme largeur
  • Utilisez flex-basis: auto
  • Limiter explicitement la largeur: max-width: $value
16
Ariel

Le problème semble être la valeur de -ms-flex-negative: 0 dans la zone contenant le remplissage. Si cette option est définie sur 1, elle semble fonctionner.

Le fond de RHS restera désormais dans la boîte, mais son contenu ne sera pas, bien que ce soit la même chose avec LHS. Ajouter max-width: 100% à LHS corrige cela, mais pas sur RHS, mais ajouter Word-break: break-all provoque alors la rupture du contenu et le maintien dans la zone RHS.

Fiddle

C'est ce que tu veux?

8
Ian Devlin

J'ai pu résoudre ce problème en ajoutant:

-ms-flex-preferred-size: calc($basisValue - $paddingValue * 2);

Donc, cette combinaison a fonctionné, même avec autoprefixer:

.element {
    padding: 1rem;
    flex: 0 1 20%;
    -ms-flex-preferred-size: calc(20% - 2rem);
}

La valeur de calcul remplaçait facilement les préfixes générés automatiquement, uniquement remarqués par IE.

3
allanberry

Je n'ai pas accès à IE10, mais dans IE11, je devais définir explicitement flex-base sur auto:

flex: 0 1 auto;
0
jekie