Flexbox et Internet Explorer 11 (affichage: flex dans <html>?)

117

Je prévois de m'éloigner des mises en page «flottantes» et d'utiliser CSS flexbox pour de futurs projets. J'ai été ravi de voir que tous les principaux navigateurs dans leurs versions actuelles semblent prendre en charge (d'une manière ou d'une autre) flexbox.

Je me suis dirigé vers "Résolu par Flexbox" pour regarder quelques exemples. Cependant, l'exemple "Sticky Footer" ne semble pas fonctionner dans Internet Explorer 11. J'ai joué un peu et je l'ai fait fonctionner en ajoutant display:flexau <html>et width:100%au<body>

Ma première question est donc la suivante: quelqu'un peut-il m'expliquer cette logique? J'ai juste bidouillé et ça a marché, mais je ne comprends pas très bien pourquoi ça a fonctionné de cette façon ...

Ensuite, il y a l'exemple "Media Object" qui fonctionne dans tous les navigateurs à l'exception - vous l'avez deviné - d'Internet Explorer. J'ai bidouillé avec ça aussi, mais sans succès.

Ma deuxième question est donc la suivante: y a-t-il une possibilité "propre" de faire fonctionner l'exemple "Media Object" dans Internet Explorer?

— Kodekan
source

1

Juste une mise à jour de cette vieille question: la démo liée fonctionne bien sur IE11. Doit avoir été un bug corrigé dans les 3 ans depuis que cela a été demandé.

— Daryl

151

Selon http://caniuse.com/#feat=flexbox :

"Les valeurs par défaut pour IE10 et IE11 flexsont 0 0 autoplutôt que0 1 auto , selon le projet de spécification, à partir de septembre 2013"

Donc, en termes simples, si quelque part dans votre CSS vous avez quelque chose comme ceci:, flex:1cela n'est pas traduit de la même manière dans tous les navigateurs. Essayez de le changer en1 0 0 et je crois que vous verrez immédiatement que cela fonctionne.

Le problème est que cette solution va probablement gâcher Firefox, mais vous pouvez ensuite utiliser des hacks pour cibler uniquement Mozilla et le modifier:

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

Comme il flexboxs'agit d'un candidat au W3C et non officiel, les navigateurs ont tendance à donner des résultats différents, mais je suppose que cela changera dans un avenir immédiat.

Si quelqu'un a une meilleure réponse, j'aimerais savoir!

— Odisseas
source

1

Je pense que cela signifie les besoins IE10 -ms-flex: 1 0 0;et IE11 flex: 1 0 0;..?

— Eystein

19

Avec Google Chrome 39, cela a soudainement cessé de fonctionner pour moi. Il m'a fallu des années à retrouver, mais c'était la spécification du troisième chiffre. Chrome 39 n'adhère pas flex: 1 0 0;. Mais flex: 1 0 0%;( notez le % ) ou flex: 1 0 auto;fonctionnera.

— Eystein

Oui, c'est vrai que certaines de mes créations ont aussi cassé! Je l'ai corrigé en le changeant simplement en flex: 1;Je suppose que cela dépend de ce que vous recherchez, cependant ...

— Odisseas

1

Le principal problème avec IE11 est la façon dont il calcule flex-basis. Github a une bonne discussion sur les raisons pour lesquelles flex:1 0 100%fonctionne dans certains cas pour IE11 tandis que flex: 1 0 0%ou même flex: 1 0 autofonctionne dans d'autres. Vous devez connaître le contenu à l'avance.

— P.Brian.Mackey

De caniuse.com/#feat=flexbox , il a spécifiquement mentionné sous les problèmes connus qu'IE 11 nécessite l'ajout d'une unité au troisième argument, la propriété flex-based ..

— Henry Neo

49

Utilisez un autre conteneur flex pour résoudre le min-heightproblème dans IE10 et IE11:

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

Voir une démo fonctionnelle .

N'utilisez pas la mise en page Flexbox directement sur body car elle des éléments insérés via des plugins jQuery (saisie semi-automatique, popup, etc.).
Ne pas utiliser height:100% ou height:100vhsur votre conteneur car le pied de page restera en bas de la fenêtre et ne s'adaptera pas au contenu long.
Utilisez flex-grow:1plutôt que de flex:1causer les valeurs par défaut IE10 et IE11 pour flexsont 0 0 autoet non 0 1 auto.

— BeliG
source

3

Je trouve que je devais ajouter flex-direction: columnà .ie-fixMinHeightéviter les effets secondaires. Si vous n'avez pas de code HTML spécifique à IE, vous pouvez utiliser.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

— Mark Horgan

Je sais que c'est 2 ans, mais merci! Je suivais ce stackoverflow.com/a/24979148/359157 et je me suis battu pour toujours pour essayer de comprendre pourquoi IE a été interrompu alors qu'Edge et Chrome fonctionnaient parfaitement. Le heightvs min-heightétait la clé.

— TyCobb

39

Vous avez juste besoin flex:1; Cela résoudra le problème pour l'IE11. Je seconde Odisseas. Attribuez également une hauteur de 100% aux éléments html, body .

Modifications CSS:

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

URL de travail: http://jsfiddle.net/3tpuryso/13/

— Ashok Kumar Gupta
source

Pourriez-vous s'il vous plaît expliquer plus sur ce problème: Existe-t-il une possibilité "propre" de faire fonctionner l'exemple "Objet multimédia" dans IE?

— Ashok Kumar Gupta

1

Cela fonctionne pour moi. Une chose que j'ai trouvée (parce que cela m'a attiré) est que si vous avez un élément contenant, les display: flex;styles et associés doivent être appliqués à la fois au bodyconteneur et: jsfiddle.net/Skateside/nezdrrkr

— James Long

La définition de la hauteur html à 100% semble faire en sorte que le contenu de maincesse de croître correctement (en chrome, au moins); si vous ajoutez suffisamment de contenu, il dépassera le pied de page. jsfiddle.net/3tpuryso/65

— FoolishSeth

@FoolishSeth tel qu'il est en ce moment, vous lui dites essentiellement de croître à 100% et pas un pixel de plus. Vous devriez régler le sur htmlà la min-height: 100%place, pour suivre votre contenu

— Odisseas

Merci! La partie qui manquait pour moi n'était en fait aucun des attributs flex, mais la hauteur: 100% sur l'élément contenant (qui pour moi était un div .pusher car mon site comprend une barre latérale réactive).

— zanther

0

Voici un exemple d'utilisation de flex qui fonctionne également dans Internet Explorer 11 et Chrome.

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>

Développer l'extrait

— BadTree Lu
source

15

Veuillez donner des informations supplémentaires - au lieu de simplement coller votre fichier Html.

— Peter le

7

Bien que cette réponse soit probablement correcte et utile, il est préférable que vous y incluiez des explications pour expliquer comment elle aide à résoudre le problème. Cela devient particulièrement utile à l'avenir, s'il y a un changement (peut-être sans rapport) qui l'empêche de fonctionner et que les utilisateurs doivent comprendre comment cela fonctionnait autrefois.

— Erty Seidohl

0

Parfois, c'est aussi simple que d'ajouter: '-ms-' devant le style Comme -ms-flex-flow: row wrap; pour le faire fonctionner aussi.

— Marsel Gray
source

3

Parfois, mais la plupart du temps non;)

— Déchargons