FLEX, MAX-WIDTH et MARGIN AUTO

Bonjour à toutes et tous,
Après avoir lu une première fois le dernier livre de Raphaël Goetter, relatif au FLEXBOX, j'en ai commencé l'exploration détaillée, en essayant d'adapter certains des éléments à un projet futur.
C'est évidemment prometteur mais je bute déjà sur un point particulier.
Malgré quelques heures de recherches et de nombreux sites consultés, je me résous à demander de l'aide ici.
Il s'agit de la mise en page proposée sur le lien ci-dessous :

http://codepen.io/raphaelgoetter/details/EajYme

J'ai parfaitement compris le principe de fonctionnement et reproduit ce modèle sans problème.
Cependant, après le "header" qui tiendrait sur toute la largeur de n'importe quel écran, je souhaite que le "main" ait sa dimension réduite et soit centré sur la page.
J'ai donc donné au "main" une "max-width" de 1200px auquel j'ai ajouté un "margin:auto".
Le résultat est positif avec Firefox, Chrome, Opera, Edge... mais pas avec IE11
Que faut-il donc modifier pour que IE11 accepte ce positionnement ?
Merci d'avance pour vos réponses éclairées !
Alain

Hello,

Sans avoir pu tester, je présume que c'est dû à un bug connu de min-height vs IE :
https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items

Bonne chance

Bonjour Raphaël et merci pour la réponse rapide.

Une nuit plus tard...
J'ai fini par supprimer le min-height du body et ne plus rendre celui-ci flex-container. Cela supprime de fait l'attachement du footer au bas de page ce qui n'est pas vraiment critique car mes pages futures seront largement remplies.
Avec le main en flex-container je garde la main sur les colonnes et le tout est centré avec IE11.
Sans doute existe-t-il une solution académique qui éviterait de modifier le template originel de cet excellent livre
Satané IE quand même
Peut-être que quelqu'un de passage ici un jour apportera la solution adaptée.
Cordialement,
Alain

Bonjour.

IE11 ne reconnait pas les min-height comme hauteur de contenant pour les Flexbox... mais il existe effectivement une solution... détaillée dans ce Codepen :
http://codepen.io/chriswrightdesign/pen/emQNGZ

La solution est assez simple mais elle rajoute quand même une couche de complexité : le parent du contenant doit être aussi un contenant Flexbox mais dont le flex-direction est dans l'autre sens... (Edit : et align-items est en stretch...)


Modifié par Zelena (09 Dec 2016 - 09:31)

Bonjour Zelena
Merci pour cette réponse et la piste qu'elle me donne...
Je vais donc essayer de comprendre puis d'adapter cette solution au template sur lequel je me fais les dents en ce moment.
Cordialement
Alain

Cette solution est déjà appliquée sur le Codepen du template.