web-dev-qa-db-fra.com

Flexbox IE11 empêchant le retour à la ligne?

Je développe un site qui affiche OK dans les dernières versions de Firefox/SeaMonkey/Chrome, mais il est intéressant de noter que dans IE11, il existe un problème de rendu:
http://devel.gooeysoftware.com/mozaddons/switching.php

Si vous chargez cela dans IE11, l'élément de menu "Basculement de Firefox vers SeaMonkey" situé à gauche ne sera pas enveloppé dans un texte à la taille de la DIV contenant, mais débordera plutôt. Je ne vois pas pourquoi c'est. Est-ce juste un bogue dans IE11 ou est-ce qu'il me manque un peu de CSS pour l'obtenir?

METTRE À JOUR:

On dirait qu'ils ont corrigé un tas de bogues de rendu de flexbox IE11 dans Edge.

IE11:
 IE11 rendering

Bord:
 Edge rendering

cssflexboxinternet-explorer-11
23
Jez

Autant que je sache, l'implémentation de la flexbox d'IE est tout simplement cassée. C'est la réponse longue et courte à cette question. Le texte devrait être enveloppant, mais ce n'est pas le cas. C'est le cas dans Firefox et Chrome.

METTRE À JOUR:

L'implémentation de la flexbox d'IE11 était en effet cassée. Cela rend maintenant correctement dans Edge.

7
Jez

Cette solution simple a été trouvée dans le référentiel de bogues Flexbox:

/**
* Flexbug demo 2.1.b (workaround)
*
* 1. Set `max-width:100%` to prevent
*    overflow.
* 2. Set `box-sizing:border-box` if
*    needed to account for padding
*    and border size.
*/

.FlexItem {
box-sizing: border-box; /* 2 */
max-width: 100%; /* 1 */
}

Référentiel de bogues Flexbox

23
MsMaryMak

Je suis tombé sur un problème similaire et j'ai trouvé avec IE11 que vous deviez utiliser la syntaxe:

flex: 1 1 auto;

plutôt que:

flex: 1;

Grâce à cette commande Github: https://github.com/philipwalton/solved-by-flexbox/pull/8/files

8
Steve Farthing

J'ai réussi à bien enrouler le texte dans IE10 et 11 en définissant explicitement un width ou max-width sur l'élément display: flex et le fils qui doit avoir son texte encapsulé.

.flex-fix {
  display: flex;
  flex-wrap: wrap;
}

.flex-fix,
.flex-fix > * {
  max-width: 100%;
}

Voici une démonstration de Codepen .

7
shshaw

Est-ce que ce stylo aide? Voici ce que j'ai trouvé me donne une solution de contournement pour ie11.

http://codepen.io/dukebranding/pen/vLQxGy

p {
    /* Wrap the child text in a block tag, add the following styles */
    display: flex;
    width: 100%;
}
3
isralCDuke

J'ai résolu ce problème en ajoutant overflow: hidden à l'élément flex. 

Mais cela évite également le débordement de tous les éléments enfants. Il peut donc s'agir d'une mauvaise solution si vous utilisez des info-bulles ou des popovers dans votre élément flex.

1
envic

Grâce à pyko, ajoutez la classe suivante au parent de tout ce qui ne respecte pas les règles de débordement habituelles de flex:

.ie-dont-overflow {
  -ms-overflow-x: hidden;
  -ms-overflow-y: hidden;
}

Je n'ai aucune idée pourquoi cela fonctionne. IE est nul ...

0
Garrett

Je suis tombé sur une version de ce bogue, où le texte à l'intérieur d'un élément flex n'était pas enveloppant, et j'ai constaté que ce qui le réparait dans notre cas particulier consistait simplement à envelopper le texte à l'intérieur de l'élément flex dans un élément <span>, de sorte que le nœud de texte n'est pas un descendant direct de l'élément flex. Cela a permis au texte de se terminer dans IE11 comme dans d'autres navigateurs.

Je suppose que cela fonctionne pour des raisons similaires à la réponse de isralCDuke à cette question, mais semble un peu plus simple, car elle ne comporte aucune règle CSS supplémentaire.

0
Nick F