web-dev-qa-db-fra.com

IE10 Flexbox Élément P non enveloppant

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

Fondamentalement, dans IE10, un élément p dont le texte est plus large que son parent lorsque la "direction" est une ligne, débordera et poussera par la suite tous les autres frères et sœurs hors du conteneur. L'habillage semble fonctionner correctement en mode colonne (et vous pouvez afficher le même jsfiddle dans Chrome et 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;
}

Des idées sur la façon de corriger ce comportement afin qu'il ne déborde pas de son conteneur? (sans fournir un fixe avec car il est utilisé dans une configuration fluide).

internet-explorerflexbox
35
ct5845

Cela n'a aucun sens pour moi, mais ajouter -ms-flex: 0 1 auto ou -ms-flex: 1 1 auto au paragraphe et à côté le corrige dans IE10. Par défaut, les éléments sont censés avoir flex: 0 1 auto leur est appliqué lorsqu'ils deviennent des éléments flexibles.

http://jsfiddle.net/pvJRK/3/

59
cimmanon

Pour moi, je devais le faire avant qu'il ne commence à travailler pour moi:

(utiliser des classes pour plus de clarté et ne pas inclure de préfixes pour plus 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;
}

Notez que vous devez définir des éléments enfants naturellement inline sur autre chose que inline (principalement display:block ou display:inline-block) pour que le correctif fonctionne.

Merci aux réponses précédentes de m'avoir aidé la plupart du temps :)

Mise à jour:

La technique ci-dessus ne fonctionne pas si flex-direction est défini sur column.

Ma recommandation pour quand flex-direction est définie sur colonne est d'utiliser une requête multimédia de largeur minimale pour attribuer une largeur maximale 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;
    }
}
30
Daniel Tonon

La réponse acceptée n'a pas fonctionné 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%
11
FHoffmeyer

Ajouter flex-shrink: 1 au parent des éléments qui doivent être enveloppés 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 s'agit spécifiquement de flex-shrink qui résoudra le problème. Cette propriété doit être 1 par défaut, donc je suppose que c'est un bogue avec l'implémentation IE10 de flex box et en définissant explicitement sa valeur, il corrige le bogue.

3
Astrotim

enter image description here

cette image montre la moyenne de flexion par défaut dans IE 10, la valeur par défaut de flex-shrink 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 la plage ne sera pas encapsulée dans IE10, le code doit donc être le suivant:

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