Гибкое пространство между призрачным пространством

У меня странная проблема с flexbox и chrome, так как сегодня этот код работал в прошлую пятницу.

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

Вот кодовая ручка: 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, Vivaldi и Firefox, и он работает. Это не работает в Chrome и Opera.

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

Источник

2 ответа

Удалить высоту строки: 2rem; и высота строки: 1,15; из "normalize.css"

Источник

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

Источник
Другие вопросы по тегам