web-dev-qa-db-fra.com

Flexbox ne fonctionne pas dans Internet Explorer 11

Ce morceau de code fonctionne bien dans Firefox, Chrome et Edge, mais il ne fonctionne pas correctement dans IE11 en raison du modèle flex, apparemment. Comment puis-je résoudre ce problème?

Voici à quoi ça ressemble dans Firefox

enter image description here

Voici à quoi ça ressemble dans IE11

enter image description here

body * {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-flow: column;
  margin: 0;
}
main {
  flex: 1;
  display: flex;
}
header,
footer {
  background: #7092BF;
  border: solid;
  width: 100%;
}
section {
  border: solid;
  background: #9AD9EA;
  flex: 1
}
aside {
  border: solid;
  width: 150px;
  background: #3E48CC
}
<header>
  <p>header
</header>
<main>
  <aside>
    <p>aside
    <p>aside
  </aside>
  <section>
    <p>content
    <p>content
    <p>content
    <p>content
  </section>
</main>
<footer>
  <p>footer
  <p>footer
</footer>
htmlcsscss3internet-explorerflexbox
25
J. Doe

Selon Flexbugs :

Dans IE 10-11, min-height Les déclarations sur les conteneurs flex fonctionnent pour dimensionner les conteneurs eux-mêmes, mais les enfants de leurs éléments flex ne semblent pas connaître la taille de leurs parents. Ils agissent comme si aucune hauteur n'avait été définie.

Voici quelques solutions de contournement:

1. Remplissez toujours la fenêtre + défilable <aside> et <section>:

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

header,
footer {
  background: #7092bf;
}

main {
  flex: 1;
  display: flex;
}

aside, section {
  overflow: auto;
}

aside {
  flex: 0 0 150px;
  background: #3e48cc;
}

section {
  flex: 1;
  background: #9ad9ea;
}
<header>
  <p>header</p>
</header>

<main>
  <aside>
    <p>aside</p>
  </aside>
  <section>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </section>
</main>

<footer>
  <p>footer</p>
</footer>

2. Remplissez la fenêtre initialement + le défilement de page normal avec plus de contenu:

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

header,
footer {
  background: #7092bf;
}

main {
  flex: 1 0 auto;
  display: flex;
}

aside {
  flex: 0 0 150px;
  background: #3e48cc;
}

section {
  flex: 1;
  background: #9ad9ea;
}
<header>
  <p>header</p>
</header>

<main>
  <aside>
    <p>aside</p>
  </aside>
  <section>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </section>
</main>

<footer>
  <p>footer</p>
</footer>
28
Stickers

Voir "Puis-je utiliser" pour la liste complète des bogues IE11 Flexbox et plus encore)

Il existe de nombreux bogues Flexbox dans IE11 et dans d'autres navigateurs - voir flexbox sur Puis-je utiliser -> Problèmes connus, les éléments suivants étant répertoriés sous IE11:

  • IE 11 nécessite l’ajout d’une unité au troisième argument, la propriété flex-based
  • Dans IE10 et IE11, les conteneurs avec display: flex et flex-direction: column ne calculera pas correctement la taille de leurs enfants si le conteneur contient min-height mais pas de propriété height explicite
  • IE 11 n'aligne pas correctement les éléments verticalement lorsque min-height est utilisé

Voir également la liste des problèmes et des solutions de contournement de Flexbugs de Philip Walton.

17
Dave Everitt

J'ai testé une mise en page complète en utilisant flexbox il contient en-tête, pied de page, corps principal avec les panneaux gauche, central et droit. Les panneaux peuvent contenir des éléments de menu ou des pieds de page et des en-têtes devant défiler. Très complexe

IE11 et même IE Edge rencontrent des difficultés pour afficher le contenu flex, mais il peut être surmonté. Je l’ai testé dans la plupart des navigateurs et cela semble fonctionner.

Quelques corrections que j'ai appliquées sont: bug de hauteur IE11, Ajout de hauteur: 100vh et hauteur minimum: 100% au format HTML/body. Cela aide également à ne pas avoir à régler la hauteur du conteneur dans le dom. Faites également du body/html un conteneur flexible. Sinon, IE11 compressera la vue.

html,body {
    display: flex;
    flex-flow:column nowrap;
    height:100vh; /* fix IE11 */
    min-height:100%; /* fix IE11 */  
}

Un correctif pour IE Edge qui déborde du conteneur flex: overflow: masqué sur le conteneur flex principal. Si vous supprimez le débordement, IE Edge exportera le contenu de la fenêtre d'affichage au lieu de la contenir à l'intérieur du conteneur principal flex.

main{
    flex:1 1 auto;
    overflow:hidden; /* IE Edge overflow fix */  
}

enter image description here

Vous pouvez voir mes tests et mes exemples sur ma page codepen . J'ai remarqué les parties css importantes avec les correctifs que j'ai appliqués et j'espère que quelqu'un le trouvera utile.

10
Plippie