IE10 flexbox largeurs comprennent le remplissage, causant un débordement. box-sizing: border-box n'est pas corrigé
Le G flex enfant dans cet exemple a cadratin (1 em rembourrage, et il fera des RHS de débordement de la mère:
<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:
Comment puis-je éliminer les débordements lors de flex enfants de rembourrage? box-sizing: border-box
ne fonctionne pas.
- Vous pouvez réellement travailler autour de ce pour ligne flexs en utilisant simplement "largeur" dans le CSS. Mais la "hauteur" de ne pas travailler pour la colonne fléchit. Voici la colonne de la version originelle de violon: jsfiddle.net/GY4F4/7
Vous devez vous connecter pour publier un commentaire.
J'ai eu des problèmes similaires avec des
flexbox
etbox-sizing: border-box;
. Ce dernier ne semble tout simplement pas de travail dans IE. La largeur ne fonctionne pas dans ce cas puisque rembourrage va changer - mais si vous pouvez utilisermax-width
, cela devrait résoudre le problème.Dans IE
flex-basis
ne tient pas compte debox-sizing:border-box
. C'est un savoir de bug comme décrit ici: https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-boxSi elle a été fixée à Bord maintenant.
Quelques corrections:
flex-basis: calc($basisValue - $paddingValue)
← ce qui a le mieux fonctionné pour moiflex-basis: auto
max-width: $value
La question semble être la valeur pour
-ms-flex-negative: 0
sur la boîte qui a le rembourrage, si elle est définie sur 1, il semble fonctionner.L'arrière-plan de l'ERS va désormais rester à l'intérieur de la boîte, mais son contenu ne sera pas, bien que c'est la même chose avec la GAUCHE. L'ajout de
max-width: 100%
à LHS correctifs, mais pas sur les RHS, mais l'ajout deword-break: break-all
provoque alors le contenu de rupture et de rester dans le membre de droite de la boîte.Violon
Est-ce que vous souhaitez?
J'ai été en mesure de résoudre ce problème en ajoutant:
Si cette combinaison a travaillé, même lors de l'utilisation de
autoprefixer
:Le calcul de la valeur a largement remplacé le générés automatiquement les préfixes, seulement remarqué par IE.
Je n'ai pas accès à IE10, mais dans IE11, j'ai dû définir explicitement flex de base pour les auto: