Considérez l'extrait de code suivant:
.parent {
display: flex;
flex-direction: column;
width: 400px;
border: 1px solid red;
align-items: center;
}
.child {
border: 1px solid blue;
}
<div class="parent">
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
</div>
Dans Chrome, le texte s'enroule comme prévu:
Mais, dans IE11, le texte n'est pas enveloppant :
S'agit-il d'un bogue connu dans IE? (si oui, un pointeur sera apprécié)
Existe-t-il une solution de contournement connue?
Cette question similaire n'a pas de réponse définitive ni d'indicateur officiel.
css
internet-explorer
flexbox
internet-explorer-11
Misha Moroshko
la source
la source
align-items: center
de l'élément parent. Cela semble en être la causeRéponses:
Ajoutez ceci à votre code:
Nous savons qu'un enfant de niveau bloc est censé occuper toute la largeur du parent.
Chrome comprend cela.
IE11, pour une raison quelconque, souhaite une demande explicite.
Utilisation
flex-basis: 100%
ouflex: 1
fonctionne également.Afficher l'extrait de code
Remarque: il sera parfois nécessaire de trier les différents niveaux de la structure HTML pour identifier le conteneur qui reçoit le fichier
width: 100%
. Le texte d'habillage CSS ne fonctionne pas dans IEla source
flex: 1 1 50%; display: flex; align-items: center;
:. Sans surprise, IE échoue lors de l'habillage de mots longs textes dans les cellules. Le réglagewidth:100%
fonctionne, mais le réglage ne le faitmin-width: 100%
pas! Il devrait, mais ce n'est pas le cas. t (comme toutes les choses IE), donc j'ai essayémax-width: 99%
, et étonnamment, il fait le travail que je pense utiliser.width:100%
peut - être mieux?flex-direction: column
le parent pour que cela fonctionne.J'ai eu le même problème et le fait est que l'élément n'adaptait pas sa largeur au conteneur.
Au lieu d'utiliser
width:100%
, soyez cohérent (ne mélangez pas le modèle flottant et le modèle flex) et utilisez flex en ajoutant ceci:Ou:
Cela a fonctionné pour moi.
la source
Comme Tyler l' a suggéré dans l'un des commentaires ici, en utilisant
sur l'enfant peut travailler (a travaillé pour moi). L'utilisation
align-self: stretch
ne fonctionne que si vous n'utilisez pasalign-items: center
(ce que j'ai fait).width: 100%
ne fonctionne que si vous n'avez pas plusieurs fils dans votre flexbox que vous souhaitez afficher côte à côte.la source
Salut pour moi, j'ai dû appliquer la largeur 100% à son élément grand-parent. Pas ses éléments enfants.
la source
D'une manière ou d'une autre, toutes ces solutions n'ont pas fonctionné pour moi. Il y a clairement un bogue IE dans
flex-direction:column
.Je ne l'ai fait fonctionner qu'après avoir supprimé
flex-direction
:la source
Les solutions proposées ne m'ont pas aidé avec ".child {width: 100%;}", car j'avais un balisage plus compliqué. Cependant, j'ai trouvé une solution - supprimer "align-items: center;", et cela fonctionne aussi pour ce cas.
la source
align-items: center
. Voir stackoverflow.com/a/39365207/630170La seule façon dont j'ai toujours réussi à 100% à éviter ce bogue de colonne de direction flexible est d'utiliser une requête multimédia de largeur minimale pour attribuer une largeur maximale à l'élément enfant sur les écrans de la taille d'un bureau.
Vous devrez définir des éléments enfants naturellement inline (par exemple
<span>
ou<a>
) sur autre chose que inline (principalement display: block ou display: inline-block) pour que le correctif fonctionne.la source
Je n'ai pas trouvé ma solution ici, peut-être que quelqu'un me sera utile:
Bonne chance!
la source
Cela a fonctionné pour moi.
la source
Moi aussi j'ai rencontré ce problème.
La seule alternative est de définir une largeur (ou max-width) dans les éléments enfants. IE 11 est un peu stupide, et moi je viens de passer 20 minutes à réaliser cette solution.
la source
J'ai eu un problème similaire avec des images débordantes dans un wrapper flex.
L'ajout de l'un
flex-basis: 100%;
ou l' autre ouflex: 1;
de l'enfant débordant a fonctionné pour moi.la source
Pourquoi utiliser une solution compliquée si une solution simple fonctionne aussi?
la source