В основном в 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;
}
Любые идеи о том, как исправить это поведение, чтобы он не переполнял контейнер? (без подачи фиксированного, так как это используется в макете жидкости).