web-dev-qa-db-ja.com

IE11 flexbox max-width and margin：auto;

シンプルなflexboxコンテナに2つのアイテムがあります：

<div id='container'>
    <div id='first-item'>first item</div>
    <div id='second-item'>second item</div>
</div>

最初の項目にはflex-grow：1があり、最大幅は200ピクセルです。 2番目の項目には左マージンがあります：auto;コンテナの右側に配置するには：

  #container {
    display: flex;
  }

  #first-item {
    max-width: 200px;
    flex: 1;
  }

  #second-item {
    margin-left: auto;
  }

これが実際のデモです： http://jsfiddle.net/c81oxdg9/2/

最初のアイテムを左揃えにし、最大幅を持たせたい。そして、2番目のアイテムは右に揃えられます。

Chrome、Firefox、IE10でも動作しますが、IE11では動作しません。 IE11では、2番目のアイテムがコンテナーからプッシュされます。

IE11でこれを修正する方法は？いくつかのプロパティがありませんか？

htmlcssinternet-explorer-11flexbox
20
svecon

うまくいくと思われる答えを見つけました（IE 10）でテストしていませんが、width: 100%位置合わせが必要な要素に。 IEでうまく機能します。

おそらくあなたを助けるには遅すぎますが、おそらく他の誰かが解決策を必要とするでしょう。

60
tmo256

私は同じ問題を抱えていました

display: flex;
-ms-flex: 1;
max-width: 300px;

と組み合わせて

margin: 0 auto;

子要素に。コンテナdivからプッシュされます。

しかし、私は試行錯誤と読書でそれを解決しました

https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items

そして

Flexbox IE10の幅の問題

最後に私は交換してそれを解決しました

-ms-flex: 1;

と

-ms-flex: 1 0 auto;

気を付けて。これは、flexカラム内で最大幅が本当に必要な場合にのみ機能します。それ以外の場合は、display：blockのようになります。

6
Fl0R1D3R

私の場合、次のようなものがありました。

HTML：

<div class='my-flexbox'>
        <div class='wrapper'>
            <div class='content'>
                <!-- ... -->
            </div>
        </div>
</div>

CSS：

.my-flexbox {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.wrapper {
    padding: 16px;
    margin: auto;
    max-width: 90%;
    min-width: 40%;
}

.contentはnotの幅（または高さ）を固定しませんが、インライン要素とブロック要素の組み合わせを含みます。

コンテンツを水平方向と垂直方向の中央に表示したかったが、max-widthのmax-heightと.wrapperを尊重した。 justify-content: center;で.my-flexboxを指定すると、コンテンツが画面から右に押し出され（バグのように見えます）、align-items: center;が影響しませんでした（私の知る限り、これはデフォルトの動作です）。

代わりに解決策はalign-self: center;を.wrapperに追加することでした。

なぜこれが理にかなっているのかは私を超えています。おそらくこれはIE11のflexboxのバグのある実装にすぎません。

3
Benjamin Dobell