IE10 Flexbox P-Element ohne Umwicklung

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

Grundsätzlich in IE10 ein p-element, welches den text, der breiter als die Eltern, wenn die "Richtung", ist eine Zeile überläuft, und anschließend drücken Sie auf eine beliebige andere Geschwister aus dem container. Die Hülle scheint gut zu funktionieren in der Spalte Modus (und Sie können den gleichen jsfiddle in Chrom und sehen Sie, es verhält sich wie erwartet).

<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;
}

Irgendwelche Ideen auf, wie um dieses Verhalten zu beheben, so dass es nicht überläuft es container? (ohne Angabe eines festen mit, wie dieses verwendet wird, in einem fluid-layout).

InformationsquelleAutor der Frage ct5845 | 2013-05-29

  1. 57

    Macht es keinen Sinn für mich, aber das hinzufügen -ms-flex: 0 1 auto oder -ms-flex: 1 1 auto auf den Absatz und beiseite korrigiert es in IE10. Standardmäßig werden Elemente haben soll flex: 0 1 auto angewendet werden, wenn Sie flex-Elemente.

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

    InformationsquelleAutor der Antwort cimmanon

  2. 27

    Für mich, ich brauchte, um dies zu tun, bevor es beginnen würde, für mich zu arbeiten:

    (mit Klassen für Klarheit und nicht einschließlich der Präfixe für die Kürze)

    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;
}

    Beachten Sie, dass müssen Sie natürlich inline-Kind-Elemente etwas anderes als inline (vor allem display:block oder display:inline-block) für die Korrektur der Arbeit.

    Dank der vorangegangenen Antworten, die für mich immer die meisten der Weg dorthin aber nicht 🙂

    Update:

    Der oben genannten Technik funktioniert nicht, wenn der flex-Richtung festgelegt ist, in die Spalte.

    Meine Empfehlung, wenn flex-Richtung festgelegt ist-Spalte ist die Verwendung einer min-width Medien Abfrage zuweisen eine max-Breite auf dem desktop.

    .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;
    }
}

    InformationsquelleAutor der Antwort Daniel Tonon

  3. 10

    Akzeptiert die Antwort nicht für mich arbeiten.

    Mein problem (http://jsfiddle.net/Hoffmeyer/xmjs1rmq/) gelöst wurde, wie beschrieben, in flexbugs https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container

    Set

    max-width: 100%

    InformationsquelleAutor der Antwort FHoffmeyer

  4. 3

    Hinzufügen flex-shrink: 1 um das übergeordnete Element der Elemente, die müssen Umhüllung behoben hat dies für mich in IE10.

    Hinweis: flex: 1 1 auto (oder -ms-flex) ist eine Kurzform für:

    flex-grow: 1
flex-shrink: 1
flex-basis: auto

    In diesem Fall ist es insbesondere flex-shrink dass das Problem zu beheben. Diese Eigenschaft sollte 1 standardmäßig, also ich nehme an das ist ein bug im IE10 Umsetzung von flex-box und durch das explizite setzen Sie dessen Wert, es behebt den Fehler.

    InformationsquelleAutor der Antwort Astrotim

  5. 0

    IE10 Flexbox P-Element ohne Umwicklung

    diesem Bild zeigen die defult flex bedeutet in der IE-10, flex-shrink-Voreinstellung in IE10 0 ist;
    wenn also der code ist:

    .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>

    aber die Spanne wird nicht wickeln Sie Sie in IE10, damit der code muss so sein:

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

    InformationsquelleAutor der Antwort Sun

Schreibe einen Kommentar