Нерегулярная ошибка ширины дочернего элемента с CSS-разметкой сетки в Firefox - PullRequest
Новая
       12

Нерегулярная ошибка ширины дочернего элемента с CSS-разметкой сетки в Firefox

0 голосов
/ 27 августа 2018

Я пытаюсь построить одинаковые столбцы для своих карт, но мое решение не работает в Firefox, в отличие от Chrome.

Мой код: 

.grid {
    display: grid;
    width: 1170px;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
    @include breakpoint(xs) {
        grid-template-columns: repeat(3, 1fr);
    }
    @include breakpoint(sm) {
        grid-template-columns: repeat(4, 1fr);
    }
    @include breakpoint(lg) {
        grid-template-columns: repeat(5, 1fr);
    }
}

.card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

Chrome результат (хорошо):

enter image description here

Результат Firefox (плохо):

enter image description here

1 Ответ

0 голосов
/ 31 августа 2018

вы пробовали следующий CSS? 

.card {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-width: 0;
}

Ваш код работает для меня. Может быть, это html-элемент внутри вашей карты, который отличается?

Не могли бы вы сделать ручку с полным кодом (HTML & CSS), чтобы мы могли помочь лучше?

Не могли бы вы попробовать префикс всего вашего CSS?

...