Attention quand vous faites une modale centrée horizontalement et verticalement avec Flexbox. Si le contenu de la modale est plus grand que le container, le centrage va tronquer le contenu.

L'astuce est d'appliquer ce CSS sur les flex items :

.your-flex-items {
  margin-top: auto;
  margin-bottom: auto;
}

En principe, un simple margin: auto devrait fonctionner mais ça a causé des bugs avec IE chez moi. D'ailleurs pour que ça fonctionne correctement avec IE (voir les commentaires en dessous du post), il faut appliquer align-items: flex-start au lieu de center sur le container.