web-dev-qa-db-ja.com

flex-growがInternet Explorer 11で機能しない

ハイ

IEでflexに問題があります。

http://jsfiddle.net/EvvBH/

#two要素にはflex: auto、十分なコンテンツがない場合でも、コンテナを埋めるためにそれを展開することになっています。

ただし、これはChromeおよびFirefoxでのみ行われます。IEでは、単に機能しません。

はflex-growはIEでサポートされていませんか？

cssinternet-explorerflexbox
20
katie

誰かがこれを体ではなく子供のdivで試している場合。高さを0に設定できます。 min-heightを持つ要素。

IEはflex-grow auto要素の親要素に任意の高さを必要としています。

したがって、次のようになります。

.flex-parent{
  display: flex;
  min-height: 300px;
  height: 0;
}
.flex-child{
  flex: 1 1 auto;
}
45
Rory

IEにはflex: 1 1 autoが必要です

理解できないflex: 1

10
William

これは、min-heightで<body>を使用して高さ全体を取得するために発生します。 Internet Explorerの場合、heightプロパティを使用する必要があります（100%または100vhを使用）。

8
Johan Gorter

達成しようとしていることは本当にわかりませんが、Flexboxレイアウトが機能する方法ではありません。要素の 'flex'プロパティを使用するには、 'を持つ親要素内にある必要があります。 display：flex 'プロパティ。

<style>
    #flexContainer {
        display: flex;
    }
    #item1 {
        width: 50px;
        background: #66CC33;
        flex: 1;
    }
    #item2 {
        width: 50px;
        background: #0099FF;
        flex: 5;
    }
    #item3 {
        width: 50px;
        background: #66CC33;
        flex: 10;
    }
</style>

<html>
    <div id="flexContainer">
        <div id="item1">1</div>
        <div id="item2">2</div>
        <div id="item3">3</div>
    </div>
</html>
0
user341234

私が使用します -ms-flex: 1 1 auto; IEはflexを完全にはサポートしていません。接頭辞を付ける必要があります。

0
Nienormalny_