IE10 Flexbox P-элемент без обертывания

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

В основном в IE10 элемент p, который имеет более широкий текст, чем его родительский, когда "направление" представляет собой строку, будет переполняться и впоследствии вытеснить любых других братьев и сестер из контейнера. Обертка, похоже, отлично работает в режиме столбца (и вы можете просматривать тот же jsfiddle в Chrome и видеть, как он ведет себя так, как ожидалось).

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

Любые идеи о том, как исправить это поведение, чтобы он не переполнял контейнер? (без подачи фиксированного, так как это используется в макете жидкости).

Ответы

Ответ 1

Это не имеет для меня никакого смысла, но добавляет -ms-flex: 0 1 auto или -ms-flex: 1 1 auto к абзацу, а в сторону исправляет его в IE10. По умолчанию элементы должны иметь flex: 0 1 auto, применяемые к ним, когда они становятся гибкими элементами.

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

Ответ 2

Для меня мне нужно было сделать это, прежде чем он начнет работать для меня:

(используя классы для ясности и не содержащие префиксы для краткости)

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

Обратите внимание, что для исправления необходимо установить естественные встроенные дочерние элементы для чего-то другого, кроме встроенного (главным образом display:block или display:inline-block).

Спасибо предыдущим ответам за то, что я получил большую часть пути, хотя:)

Update:

Вышеуказанный метод не работает, если для направления flex задано столбец.

Моя рекомендация, когда для параметра flex-direction установлено значение "Столбец", следует использовать запрос ширины минимальной ширины для назначения максимальной ширины на рабочем столе.

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

Ответ 4

Добавление flex-shrink: 1 к родительскому элементу, который требует обертывания, исправил это для меня в IE10.

Примечание: flex: 1 1 auto (или -ms-flex) является сокращением для:

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

В этом случае именно flex-shrink устраняет проблему. Это свойство должно быть 1 по умолчанию, поэтому я предполагаю, что это ошибка с реализацией Flex Flex и явным образом устанавливая его значение, оно исправляет ошибку.