Flex espace-entre: espace fantôme

Question

J'ai un problème étrange avec flexbox et chrome depuis aujourd'hui, ce code fonctionnait vendredi dernier.

J'ai un "espace fantôme" (ressemble à une marge) sous mon lien. Et toujours quand je le vérifie dans Chrome Dev Tools, leurs marges et leurs paddings sont toujours mis à zéro (comme prévu). (http://imgur.com/tQkO6Yl)

Voici un codepen: http://codepen.io/AlexandreJolly/pen/ygqREb

Haml:

.card 
    .card-top 
     %h3 Test 
     %p Lorem 
    .card-bottom 
     %a{:href => "#"} Link 

Sass:

.card 
    background: white 
    width: 100% 
    height: auto 
    min-height: 192px 
    display: flex 
    flex-direction: column 
    justify-content: space-between 

.card-top 
    background-color: green 

.card-bottom 
    background-color: red 

Je l'ai testé ce code dans Firefox Dev Edition Vivaldi et Firefox et ça semble fonctionner. Cela ne fonctionne pas dans Chrome et Opera.

Je pense que c'est un problème avec une mise à jour Chrome/webkit ce week-end ou est-ce que quelque chose me manque?

Answer 1

Enlever line-height: 2rem; et hauteur de ligne: 1,15; de « normalize.css »

Answer 2

J'ai eu un problème similaire avec un espace fantôme lors de l'empilage de deux éléments à l'aide flex-flow:column puis en définissant une de la hauteur des éléments à 0. Réglage de la hauteur maximum à une certaine valeur dans mon cas 100% résolu le question pour moi.