IE10 Flexbox P élément non-emballage

http://jsfiddle.net/pvJRK/2/

Essentiellement dans IE10 un élément p qui a le texte est plus large que celle du parent lors de la "direction" est une ligne, un débordement, et par la suite de pousser tous les autres frères et sœurs hors du conteneur. L'emballage semble bien fonctionner dans la colonne mode (et vous pouvez voir le même jsfiddle en Chrome et de le voir se comporter comme prévu).

<div id="flex-one">
    <p>Some extra long content (for the container) that correctly wraps!</p>
    <aside>Content</aside>
</div>

<div id="flex-two">
    <p>Some extra long content (for the container) that incorrectly wraps!</p>
    <aside>Content</aside>
</div>

div {
    width: 250px;
    padding: 1em;
    background: blue;
    display: -webkit-flex;
    display: -ms-flexbox;
    margin-bottom: 1em;
}

#flex-one {
    -webkit-flex-flow: column;
    -ms-flex-direction: column;
}

#flex-two {
    -webkit-flex-flow: row;
    -ms-flex-direction: row;
}

p {
    margin: 0;
    padding: 0;
    background: yellow;
}

aside {
    background: red;
}

Toutes les idées sur la façon de corriger ce comportement afin qu'elle ne déborde pas, c'est le conteneur? (sans fournir un fixe avec comme ce est utilisé dans un fluide, mise en page).

InformationsquelleAutor ct5845 | 2013-05-29

flexbox internet-explorer

59

Il ne fait aucun sens pour moi, mais l'ajout de -ms-flex: 0 1 auto ou -ms-flex: 1 1 auto à l'alinéa et de côté le corrige dans IE10. Par défaut, les éléments sont censés avoir flex: 0 1 auto applique lorsqu'ils deviennent flex éléments.

http://jsfiddle.net/pvJRK/3/
- Je vous remercie pour l'affichage de cette! J'ai été en cours d'exécution dans cette question, mais c'est avec tous au niveau du bloc des éléments typographiques - les paragraphes et les en-têtes. Il a été me rend fou!
- Je tenais à préciser que la raison pour cela est parce que IE10 et 11 ont une valeur par défaut différente pour flex éléments. C'est tout simplement parce que IE est inutile.
- Comme vous pouvez le lire ici, la valeur par défaut pour IE10 est flex: 0 0 auto;.
- Sinon, flex-shrink: 1 serait suffisant
- a fonctionné pour moi! Merci
- 'C'est à dire 10 utilise une autre initiale flex réduction de la valeur' github.com/philipwalton/...
InformationsquelleAutor cimmanon
30

Pour moi, j'avais besoin de faire ça avant qu'il ne commence à travailler pour moi:

(à l'aide de classes pour plus de clarté et de ne pas y compris les préfixes pour des raisons de concision)

HTML:
```
<a class="flex">
    <span class="flex-child">Text that isn't wrapping in IE10</span>
</a>
```
CSS:
```
.flex {
    display: flex;
}

.flex-child {
    display: block;
    max-width: 100%;
    flex-shrink: 1;
}
```
Avis que vous devez définir naturellement inline éléments d'enfant à quelque chose d'autre que dans la ligne (principalement display:block ou display:inline-block) pour la correction du travail.

Merci des réponses précédentes pour m'avoir fait l'essentiel du chemin il y a bien 🙂

Mise à jour:

La technique ci-dessus ne fonctionne pas si flex-direction est définie pour la colonne.

Ma recommandation pour lorsque flex-direction est définie pour la colonne est d'utiliser un min-width media query pour attribuer un max-width sur le bureau.
```
.flex {
    display: flex;
    flex-direction: column;
}

//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
    .flex-child {
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
        flex-shrink: 1;
    }
}
```
- Cette technique a fait l'affaire pour moi. Par la mise en display: block et max-width: 100% sur l'élément enfant il a arrêté le texte s'affiche sur une seule ligne. Merci de poster +1.
InformationsquelleAutor Daniel Tonon
11

Accepté la réponse n'a pas de travail pour moi.

Mon problème (http://jsfiddle.net/Hoffmeyer/xmjs1rmq/) a été résolu comme décrit dans flexbugs https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container

Ensemble
```
max-width: 100%
```
InformationsquelleAutor FHoffmeyer
3

Ajoutant flex-shrink: 1 pour le parent des éléments qui ont besoin d'emballage a corrigé cela pour moi dans IE10.

Remarque: flex: 1 1 auto (ou -ms-flex) est un raccourci pour:
```
flex-grow: 1
flex-shrink: 1
flex-basis: auto
```
Dans ce cas, il est expressément flex-shrink qui va résoudre le problème. Cette propriété doit être 1 par défaut, donc je suppose que c'est un bug avec le IE10 mise en œuvre de flex zone et par la définition explicite de sa valeur, il corrige le bug.

InformationsquelleAutor Astrotim

IE10 Flexbox P élément non-emballage

ce tableau montrent le défaut flex dire dans IE 10, flex-rétrécir par défaut dans IE10 est 0;
donc, si le code est:

.title {
   display: flex;
   justify-content: space-between;
}

<div class="title">
    <span class="title-name">some word word word</span>
    <label >some one checkbox</label>
</div>

mais le span est pas envelopper dans IE10, de sorte que le code nécessaire à l'être:

.title {
    display: flex;
    justify-content: space-between;
}
.title-name{
    display: block;
    flex-shrink: 1;
}

InformationsquelleAutor Sun

Vous devez vous connecter pour publier un commentaire.