Flex space-between: ghost space

У меня странная проблема с flexbox и chrome, так как сегодня этот код работал в последнюю пятницу.Flex space-between: ghost space

У меня есть «призрачное пространство» (выглядит как маржа) по моей ссылке. И всегда, когда я проверяю его в Chrome Dev Tools, их вычисленные поля и paddings всегда обнуляются (как и ожидалось). (http://imgur.com/tQkO6Yl)

Вот 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

Я тестировал этот код в Firefox Dev Edition, Вивальди и Firefox и похоже, работает. Он не работает в Chrome и Opera.

Я думаю, что это проблема с обновлением Chrome/webkit в эти выходные или я что-то упускаю?

источник

2017-02-07 Alexandre Jolly

Что должно случиться? если красный будет красным на дне (минус прокладка) – Pete

@Pete Да. Вот что должно произойти: http://imgur.com/53b08Kx –

работает для меня, выглядит как ваш imate, chrome на mac –

Удалить line-height: 2rem; и line-height: 1.15; от «normalize.css»

источник

2017-02-07 11:21:32 Kumar

У меня была аналогичная проблема с призраком пространства при укладке двух элементов с помощью flex-flow:column затем установить один из высоты элементов 0. Установка макс-высоту до некоторого значения в моем случае 100% решена вопрос для меня.

источник

2018-02-08 17:51:46 BathgateIO

Flex space-between: ghost space

ответ

Смежные вопросы