web-dev-qa-db-fra.com

flex-grow ne fonctionne pas dans Internet Explorer 11

Hy

J'ai des problèmes avec Flex dans IE:

http://jsfiddle.net/EvvBH/

Notez que l'élément #two a flex: auto, qui est censé le développer pour remplir le conteneur, même s'il n'y a pas assez de contenu.

Mais il ne le fait que dans Chrome et Firefox. Dans IE cela ne fonctionne tout simplement pas.

est flex-grow non pris en charge par IE?

cssinternet-explorerflexbox
20
katie

Au cas où quelqu'un essaierait cela non pas sur le corps mais sur un div enfant. Vous pouvez simplement définir la hauteur: 0; sur l'élément avec la hauteur min.

IE veut juste n'importe quelle hauteur sur l'élément parent de l'élément auto flex-grow.

Cela pourrait donc ressembler à ceci:

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

IE nécessite flex: 1 1 auto

il ne comprend pas flex: 1

10
William

Cela se produit car vous utilisez le min-height sur le <body> pour obtenir la pleine hauteur. Pour Internet Explorer, vous devez utiliser la propriété height (utilisez 100% ou 100vh).

8
Johan Gorter

Je ne sais pas vraiment ce que vous essayez de réaliser, mais ce n'est pas ainsi que fonctionnent les dispositions Flexbox. Pour utiliser la propriété 'flex' sur un élément, elle doit se trouver dans un élément parent qui a le ' display: flex ', propriété.

<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

J'utiliserai -ms-flex: 1 1 auto; Parce que IE ne prend pas complètement en charge flex. Devrait être avec préfixe.

0
Nienormalny_