web-dev-qa-db-fra.com

IE11 flexbox max-width et margin: auto;

J'ai un simple conteneur flexbox avec deux articles:

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

Le premier article a une croissance flexible: 1 et une largeur maximale à 200 pixels. Le deuxième élément a la marge gauche: auto; pour être aligné à droite sur le conteneur:

  #container {
    display: flex;
  }

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

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

Voici une démo fonctionnelle: http://jsfiddle.net/c81oxdg9/2/

Je veux que le premier élément soit aligné à gauche et ait une largeur maximale. Et le deuxième élément à aligner à droite.

Fonctionne très bien dans Chrome, Firefox et même IE10, mais pas IE11. Dans IE11, le deuxième élément est poussé hors du conteneur.

Comment résoudre ce problème pour IE11? Suis-je en train de manquer une propriété?

htmlcssinternet-explorer-11flexbox
20
svecon

J'ai trouvé une réponse qui semble fonctionner (même si j'avoue ne pas l'avoir testée dans IE 10): j'ai ajouté width: 100% à l'élément à aligner. Fonctionne très bien dans IE.

Probablement trop tard pour vous aider, mais peut-être que quelqu'un d'autre aura besoin de la solution.

60
tmo256

J'ai eu le même problème avec

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

en combinaison avec

margin: 0 auto;

sur les éléments enfants. Ils sont poussés hors du conteneur.

Cependant, je l'ai résolu avec une erreur et une lecture

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

et

problèmes de largeur Flexbox IE1

Enfin je l'ai résolu en remplaçant

-ms-flex: 1;

avec

-ms-flex: 1 0 auto;

Fais attention. Cela ne fonctionne que si vous avez vraiment besoin d'une largeur maximale à l'intérieur des colonnes flexibles. sinon cela ressemblera à display: block.

6
Fl0R1D3R

Dans mon cas, j'avais quelque chose comme:

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 n'a pas une largeur (ou hauteur) fixe de toute sorte, mais contient à la place une combinaison d'éléments en ligne et d'éléments de bloc.

Je voulais que mon contenu apparaisse centré horizontalement et verticalement, mais respectez le max-width et max-height de .wrapper. En précisant justify-content: center; sur .my-flexbox a poussé le contenu de l'écran vers la droite (cela me semble être un bug), et align-items: center; n'a eu aucun impact (à ma connaissance, c'est le comportement par défaut).

Au lieu de cela la solution consistait à ajouter align-self: center; à .wrapper.

Pourquoi cela a un sens me dépasse. Vraisemblablement, ce n'est qu'une implémentation buggée de flexbox dans IE11.

3
Benjamin Dobell