IE10 Flexbox的P元素的非包裹

Question

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

基本上在IE10具有文本的宽度大于它的父当“方向”是一个行的p元件，将溢出，并随后将任何其他的兄弟姐妹出容器。包装似乎在列模式下工作正常（你可以在Chrome浏览器中查看相同的jsfiddle并且看到它的行为如预期）。

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

有关如何纠正这种行为，以便它不会溢出它的容器的任何想法？ （不提供固定的，因为这用于流体布局）。

Answer 1

它对我没有任何意义，但在段落中添加-ms-flex: 0 1 auto或-ms-flex: 1 1 auto，并在IE10中修正它。默认情况下，当元素变为弹性项目时，元素应该应用于它们。

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

Answer 2

添加flex-shrink: 1于需要包装的元素的父IE10中已经修复了这个给我。

注：flex: 1 1 auto（或-ms-flex）是的缩写：

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

在这种情况下，它是专门flex-shrink，将解决这个问题。这个属性默认应该是1，所以我认为这是一个弹性框IE10实现的bug，通过明确设置它的值，它修复了这个bug。

Answer 3

接受的答案不适用于我。

在flexbugs https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container

设置

max-width: 100% 

Answer 4

对我描述我的问题（http://jsfiddle.net/Hoffmeyer/xmjs1rmq/）解决了，我需要做的这之前，它将开始为我工作：

（使用为了清楚起见而不包括前缀）

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）的修复工作以外的东西。

谢谢你把我大部分的方式存在虽然:)

更新以前的答案：

如果弯曲方向设置为列以上技术不起作用。

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