Texte dans un conteneur flex ne pas envelopper dans IE11
Considérons le fragment de code suivant:
CSS:
.parent {
display: flex;
flex-direction: column;
width: 400px;
border: 1px solid red;
align-items: center;
}
.child {
border: 1px solid blue;
}
HTML:
<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 se termine comme prévu:
Mais, dans IE11, le texte n'est pas d'emballage:
Est-ce un bug connu dans IE? (si oui, un pointeur sera apprécié)
Est-il une solution connue?
Cette question similaire n'ont pas de réponse définitive et officielle pointeur.
- Double Possible de IE11 flexbox la prévention de l'habillage de texte?
- Le problème disparaît lorsque je supprime
align-items: center
de l'élément parent. Cela semble être ce qui en est la cause
Vous devez vous connecter pour publier un commentaire.
Ajouter à votre code:
Nous savons qu'un bloc au niveau de l'enfant est censé occuper toute la largeur de la société mère.
Chrome comprend cela.
IE11, pour quelque raison que ce soit, veut d'une demande explicite.
À l'aide de
flex-basis: 100%
ouflex: 1
fonctionne également.CSS:
HTML:
Remarque: Parfois, il sera nécessaire de faire le tri entre les différents niveaux de la structure HTML à cibler les conteneur obtient le
width: 100%
. CSS habillage de texte ne fonctionne pas sous IEflex: 1 1 50%; display: flex; align-items: center;
. Il n'est pas surprenant, c'est à dire échoue alors que la parole de l'habillage de longs textes dans les cellules. Réglagewidth:100%
fonctionne, mais la mise enmin-width: 100%
ne marche pas! Il devrait, mais il n'a pas (comme toutes les choses IE), j'ai donc essayémax-width: 99%
, et étonnamment, t de travail. Je pense que l'utilisationwidth:100%
peut-être mieux?flex-basis:100%
. Il serait plus logique, puisque la cellule elle-même est aussi un conteneur flex.flex-direction: column
sur le parent pour que cela fonctionne.flex-basis:100%
a parfaitement fonctionné pour mon cas d'utilisation..child { width: 100%; }
n'a pas.J'ai eu le même problème et le point est que l'élément n'a pas été d'adapter la largeur du conteneur.
Au lieu d'utiliser
width:100%
, être conforme (ne pas mélanger la flottante modèle et le modèle flex) et l'utilisation de flex en ajoutant ceci:Ou:
Cela a fonctionné pour moi.
Comme Tyler a suggéré, dans un des commentaires ici, en utilisant
sur l'enfant peut travailler (a fonctionné pour moi). À l'aide de
align-self: stretch
ne fonctionne que si vous n'utilisez pasalign-items: center
(qui je l'ai fait).width: 100%
ne fonctionne que si vous n'avez pas plusieurs childs à l'intérieur de votre flexbox dont vous voulez afficher côte à côte.Salut pour moi j'ai du mettre de la 100% de la largeur de son grand-parent de l'élément. Pas de son élément enfant(s).
Les solutions proposées ne m'aide pas avec ".enfant {width: 100%;}", depuis que j'ai eu plus compliqué de balisage. Cependant, j'ai trouvé une solution - supprimer "align-éléments: center;", et cela fonctionne pour ce cas.
CSS:
HTML:
align-items: center
. Voir stackoverflow.com/a/39365207/630170Le seul moyen que j'ai 100% constamment été en mesure d'éviter cette flex-direction de la colonne bug est d'utiliser un min-width media query pour attribuer un max-width de l'élément enfant sur le bureau de la taille des écrans.
Vous aurez besoin de mettre naturellement inline éléments enfants (eg.
<span>
ou<a>
) pour autre chose que dans la ligne (principalement display:block ou display:inline-block) pour la correction du travail.En quelque sorte l'ensemble de ces solutions ne fonctionne pas pour moi. Il est clair que IE bug dans
flex-direction:column
.Je n'ai eu de travail après la suppression de
flex-direction
:Pourquoi utiliser des solutions compliquées si simple on travaille trop?