35

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

基本的にIE10では、「方向」が行の場合に親よりも広いテキストを持つap要素はオーバーフローし、その後他の兄弟をコンテナから押し出します。ラッピングは列モ​​ードで正常に動作しているように見えます (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;
}

コンテナがオーバーフローしないようにこの動作を修正する方法についてのアイデアはありますか? (これは可変レイアウトで使用されるため、fixed を指定せずに)。

4

5 に答える 5

30

私にとっては、これが機能する前にこれを行う必要がありました。

(わかりやすくするためにクラスを使用し、簡潔にするために接頭辞を含めません)

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-direction が column に設定されている場合の私の推奨事項は、min-width メディア クエリを使用して、デスクトップに 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;
    }
}
于 2015-11-19T04:07:16.840 に答える
11

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

私の問題 ( http://jsfiddle.net/Hoffmeyer/xmjs1rmq/ ) は、flexbugs https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-で説明されているように解決されました。オーバーフローコンテナ

設定

max-width: 100%
于 2015-10-05T06:06:24.430 に答える
3

ラッピングが必要な要素の親に追加flex-shrink: 1すると、IE10でこれが修正されました。

注: flex: 1 1 auto(または-ms-flex) は次の省略形です。

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

この場合、特にflex-shrink問題を解決するのはそれです。このプロパティは1デフォルトである必要があるため、これはフレックス ボックスの IE10 実装のバグであると想定し、その値を明示的に設定することでバグを修正します。

于 2015-08-18T01:46:23.967 に答える