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

Ceci est un bug connu qui semble avoir été corrigé en interne chez Microsoft.

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

Answer 2

J'ai mis à jour les deux fiddles. J'espère que cela facilitera votre travail.

centrage

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

body
{
    margin: 0;
}

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

.inner
{
    width: 80%;
    margin: 0 auto;
}

centrer et faire défiler

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

    body
    {
        margin: 0;
        display:flex;
    }

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

    .inner
    {
        width: 80%;
        margin-top:40px;
        margin: 0 auto;
    }

Answer 3

Je n'ai pas beaucoup d'expérience avec Flexbox mais il me semble que la hauteur forcée sur les balises html et body provoque la disparition du texte en haut lorsqu'il est redimensionné - je n'ai pas pu tester sur IE mais j'ai trouvé le même effet sur Chrome.

J'ai bifurqué votre fiddle et supprimé les déclarations de height et width.

body
{
    margin: 0;
}

Il semblait également que les paramètres flex doivent être appliqués à d'autres éléments flex. Cependant, l'application de display: flex à .inner a causé des problèmes, donc j'ai explicitement défini .inner sur display: block et défini .outer sur flex pour le positionnement.

J'ai défini la hauteur minimale de .outer pour remplir la fenêtre d'affichage, le display: flex, et défini l'alignement horizontal et vertical:

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

J'ai défini .inner sur display: block explicitement. Dans Chrome, il semblait qu'il héritait du flex de .outer. J'ai également défini la largeur:

.inner
{
    display:block;
    width: 80%;
}

Cela a résolu le problème dans Chrome, espérons que cela fera de même dans IE11. Voici ma version du fiddle: http://jsfiddle.net/ToddT/5CxAy/21/

Answer 4

Si vous pouvez définir la largeur et la hauteur du parent, il existe un moyen plus simple de centrer l'image sans avoir à créer un conteneur pour cela.

Pour une raison quelconque, si vous définissez la largeur minimale, IE reconnaîtra également la largeur maximale.

Cette solution fonctionne pour IE10+, Firefox et Chrome.

div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid orange;
    width: 100px;
    height: 100px;
}

img{
  min-width: 10%;
  max-width: 100%;
  min-height: 10%;
  max-height: 100%;
}

https://jsfiddle.net/HumbertoMendes/t13dzsmn/

Answer 5

Une bonne solution que j'ai trouvée qui a fonctionné pour moi, vérifiez ce lien https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Tout d'abord, nous ajoutons une div parent, ensuite nous changeons min-height:100% en min-height:100vh. Cela fonctionne à merveille.

// en ayant un parent avec flex-direction:row, 
// le bug de min-height dans IE ne persiste pas.
.flashy-content-outer { 
    display:flex;
    flex-direction:row;
}
.flashy-content-inner {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-width:100vw;
    min-height:100vh;
    padding:20px;
    box-sizing:border-box;
}
.flashy-content {
    display:inline-block;
    padding:15px;
    background:#fff;
}