Question

从今天开始，我对flexbox和chrome有一个奇怪的问题，这个代码在上个星期五正在运行。

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

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

Haml的：

.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开发版，Vivaldi和Firefox中测试了这段代码，看起来很有用。它在Chrome和Opera中不起作用。

我认为本周末Chrome / webkit更新存在问题，或者我错过了哪些内容？

Answer 1

删除 line-height：2rem; 和行高：1.15; 来自＆＃34; normalize.css＆＃34;

Answer 2

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

灵活空间 - 鬼间隙

2 个答案: