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