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

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

5 ответов


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

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


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

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

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

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

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

обновление:

вышеуказанный метод не работает если flex-direction установлено в столбец.

моя рекомендация для того, когда flex-direction имеет значение column, использовать запрос min-width media для назначения max-width на рабочем столе.

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

принятый ответ не работа для меня.

моя проблема (http://jsfiddle.net/Hoffmeyer/xmjs1rmq/) было решено, как описано в flexbugs https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container

Set

max-width: 100%

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

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

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

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


enter image description here

это изображение показывает среднее значение flex defult в IE 10, значение по умолчанию flex-shrink в IE10 равно 0; поэтому, если код:

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

но промежуток не будет обернут в IE10, поэтому код должен быть таким:

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