Flex space-between：幽灵空间答案

【问题标题】：Flex space-between: ghost spaceFlex space-between：幽灵空间
【发布时间】：2017-06-24 14:35:27
【问题描述】：

从今天开始，我在使用 flexbox 和 chrome 时遇到了一个奇怪的问题，这段代码上周五还在工作。

我的链接下有一个“幽灵空间”（看起来像一个边距）。当我在 Chrome 开发工具中检查它时，它们的计算边距和填充总是归零（如预期的那样）。 (http://imgur.com/tQkO6Yl)

这是一个代码笔：http://codepen.io/AlexandreJolly/pen/ygqREb

哈姆：

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

萨斯：

.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

我已经在 Firefox Dev Edition、Vivaldi 和 Firefox 中测试了这段代码，它似乎工作正常。它不适用于 Chrome 和 Opera。

我认为这是本周末 Chrome/webkit 更新的问题，还是我遗漏了什么？

【问题讨论】：

会发生什么？红色是否应该与底部齐平（减去填充）
@Pete 是的。这是要发生的事情：imgur.com/53b08Kx
为我工作，看起来像你的 mate，mac 上的 chrome
怎么样：jsfiddle.net/p7a1sw2j/2
@Dejan.S 我在 MS Windows 桌面上进行了检查，它可以工作。我实际上使用的是适用于 MacOS 的 Chrome 56

标签： html css google-chrome flexbox

【解决方案1】：

删除线高：2rem；和行高：1.15；来自“normalize.css”

【讨论】：

【解决方案2】：

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

【讨论】：