IE 11 Flexbox enfant dépasse le conteneur

Question

J'ai mis en place l'exemple suivant. Il fonctionne sur tous les principaux navigateurs, mais pas sur IE11. Le contenu de la division déborde du conteneur flex (pas de barre de défilement) et pousse le pied de page vers le bas. Des suggestions ?

html,
body {
  padding: 0;
  margin: 0;
}

.c1 {
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
  max-width: 500px;
  max-height: 100px;
}

.h,
.f {
  flex: 0 0 auto;
}

.b {
  border: 1px solid red;
  flex: 1 1 auto;
  overflow: auto;
}

  header
  Qu'est-ce que le Lorem Ipsum ? Le Lorem Ipsum est simplement du faux texte utilisé dans la composition et la mise en page avant impression. Le Lorem Ipsum est l'industrie du faux texte standard depuis les années 1500, quand un imprimeur inconnu a pris une galère de caractères et l'a brouillée pour en faire un livre spécimen. Il a survécu non seulement à cinq siècles, mais aussi au passage à la composition électronique, restant essentiellement inchangé. Il a été popularisé dans les années 1960 avec la sortie de feuilles Letraset contenant des passages du Lorem Ipsum, et plus récemment avec des logiciels de mise en page comme Aldus PageMaker incluant des versions de Lorem Ipsum.

  footer

Answer 1

Essayez de remplacer la propriété max-height dans la classe c1 par la hauteur pour résoudre le problème.

.c1 {
      border: 1px solid blue;
      display: flex;
      flex-direction: column;
      max-width: 500px;
      height: 100px;
    }

Rendu dans IE 11: