Flex space-between: ghost space

Question

I have a strange issue with flexbox and chrome since today, this code was working last friday.

I have a "ghost space" (looks like a margin) under my link. And always when I check it in Chrome Dev Tools, their computed margins and paddings are always zeroed (as expected). ( http://imgur.com/tQkO6Yl )

Here is a 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

I've tested this code in Firefox Dev Edition, Vivaldi and Firefox and it seems working. It doesn't work in Chrome and Opera.

I think it an issue with a Chrome/webkit update this weekend or am I missing something?

Answer 1

Remove line-height: 2rem; and line-height: 1.15; from "normalize.css"

Answer 2

当使用flex-flow:column堆叠两个元素时，我遇到了类似鬼空间的问题flex-flow:column然后将其中一个元素高度设置为0.在我的情况下将max-height设置为某个值100％为我解决了问题。