Bootstrap 4 Card Flex Width не работает правильно в Firefox

Question

У меня проблема при попытке создать веб-страницу с помощью начальной загрузки 4 и flex.Я использую Bootstrap карты определенной ширины.Я вижу, что это хорошо работает в Google Chrome и Opera, но, похоже, не работает в Firefox.Вот мой код:

    <div class="row auxAltura2">
    <div class="col">
        <div class="card">
            <div class="card-header colorPlataforma">
                Tags
            </div>
            <div id="moduloTags" class="card-body">
                ...

            </div>

        </div>
    </div>
    </div>

А теперь вот мой css:

   .auxAltura2{height:250px}
    .card-header{
        display: flex;
        flex: 1 0 30px;
        align-items: center;
        font-size:17px;
    }

Имиджевая карта на firefox:

А это изображение с карты в Opera:

Вы можете увидеть разницу между двумя браузерами.Это ошибка?Рад, что вы можете мне помочь.Спасибо за все.

Answer 1

Проблема в padding для гибкого элемента, который добавляется дополнительно к вашей 30px .card-header высоте.

Вы должны установить верхний и нижний отступы .card-header в 0;

См. Этот вопрос SO для более подробной информации: Как заставить flexbox включать отступы в вычислениях?