Flexbox ne se centre pas verticalement dans IE

Question

J'ai une simple page web avec du contenu Lipsum centré sur la page. La page fonctionne bien dans Chrome et Firefox. Si je réduis la taille de la fenêtre, le contenu se remplit dans la fenêtre jusqu'à ce qu'il ne puisse plus le faire, puis ajoute une barre de défilement et remplit le contenu en dehors de l'écran, vers le bas.

Cependant, la page ne se centre pas dans IE11. Je peux centrer la page dans IE en flexibilisant le corps, mais si je le fais, le contenu commence à sortir de l'écran vers le haut et coupe le haut du contenu.

Voici les deux scénarios. Consultez les Fiddles associés. Si le problème n'est pas évident immédiatement, réduisez la taille de la fenêtre de résultat de sorte qu'elle soit forcée de générer une barre de défilement.

Note : Cette application cible uniquement les dernières versions de Firefox, Chrome et IE (IE11), qui ont tous un support pour la Recommandation de Flexbox, donc la compatibilité des fonctionnalités ne devrait pas être un problème (en théorie).

Éditer : Lors de l'utilisation de l'API plein écran pour mettre en plein écran la div externe, tous les navigateurs centrent correctement en utilisant le CSS d'origine. Cependant, en sortant du mode plein écran, IE revient à être centré horizontalement et aligné en haut verticalement.

Éditer : IE11 utilise une implémentation non spécifique au fournisseur de Flexbox. Mises à jour du modèle de mise en page flexible ("Flexbox")

---

Se centre et se redimensionne correctement dans Chrome/FF, ne se centre pas mais se redimensionne correctement dans IE11

Fiddle : http://jsfiddle.net/Dragonseer/3D6vw/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

---

Se centre correctement partout, coupe le haut lorsqu'il est redimensionné

Fiddle : http://jsfiddle.net/Dragonseer/5CxAy/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
    display: flex;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

Answer 1

J'ai constaté que le navigateur ie rencontrait un problème pour aligner verticalement les conteneurs internes, lorsque seul le style min-height est défini ou lorsque le style de hauteur est complètement absent. Ce que j'ai fait, c'est d'ajouter le style height avec une certaine valeur et cela a résolu le problème pour moi.

par exemple :

.outer
    {
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;

       /* Centrer verticalement */
       align-items: center;

       /* Centrer horizontalement */
       justify-content: center;

       /* Centrer horizontalement sur ie */
       -ms-flex-pack: center;

        min-height: 220px; 
        height:100px;
    }

Maintenant que nous avons ajouté le style height, le min-height le remplacera. De cette façon, ie est satisfait et nous pouvons toujours utiliser min-height.

J'espère que cela sera utile pour quelqu'un.

Answer 2

Essayez d'emballer n'importe quel div avec flexbox avec flex-direction: column dans un conteneur qui est également flexbox.

Je viens de tester cela dans IE11 et cela fonctionne. Une correction étrange, mais jusqu'à ce que Microsoft rende leur correction de bogue interne publique... ça devra faire l'affaire !

HTML:

            Je devrais être centré.

CSS:

html, body {
  height: 100%;
}

.FlexContainerWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.FlexContainer {
  align-items: center;
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 600px;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  box-sizing: border-box;
  max-width: 100%;
}

2 exemples pour vous tester dans IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

Answer 3

Voici ma solution de travail (SCSS) :

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}

Answer 4

La réponse originale de https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042

.flex-container{
min-height:100px;
display:flex;
align-items:center;
}

.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}

Answer 5

Juste au cas où quelqu'un arrive ici avec le même problème que j'avais, qui n'est pas spécifiquement abordé dans les commentaires précédents.

J'avais marge: auto sur l'élément intérieur ce qui l'empêchait de coller au bas de son parent (ou de l'élément extérieur). Ce qui a résolu le problème pour moi a été de changer la marge en marge: 0 auto;.