web-dev-qa-db-ja.com

IE10 Flexbox P要素not-wrapping

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

それがコンテナでオーバーフローしないように、この動作を修正する方法に関するアイデアはありますか？ （これは流動レイアウトで使用されるため、fixedを提供しません）。

internet-explorerflexbox
35
ct5845

私には意味がありませんが、-ms-flex: 0 1 autoまたは-ms-flex: 1 1 auto段落に追加し、IE10でそれを修正します。デフォルトでは、要素にはflex: 0 1 autoフレックスアイテムになったときに適用されます。

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

59
cimmanon

私にとっては、それが私のために働き始める前にこれを行う必要がありました：

（わかりやすくするためにクラスを使用し、簡潔にするためにプレフィックスを含めない）

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がcolumnに設定されている場合、上記の手法は機能しません。

フレックス方向が列に設定されている場合の推奨事項は、最小幅のメディアクエリを使用してデスクトップの最大幅を割り当てることです。

.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;
    }
}
30
Daniel Tonon

受け入れられた答えは私にはうまくいきませんでした。

私の問題（ http://jsfiddle.net/Hoffmeyer/xmjs1rmq/ ）はflexbugs https://github.com/philipwalton/flexbugs#2-column-flexで説明されているように解決されました-items-set-to-align-itemscenter-overflow-their-container

セットする

max-width: 100%
11
FHoffmeyer

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実装のバグであると想定し、その値を明示的に設定することでバグを修正します。

3
Astrotim

enter image description here

この図は、IE 10のデフォルトのフレックス平均を示しています。IE10のflex-shrinkのデフォルトは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;
}
2
Sun