Display grid с вертикальным скролом съедает padding

Имеется grid с вертикальным скролом, внутри которого расположены карточки (div'ы) с фиксированными размерами. У родительского блока(grid) есть padding, который должен отделять контент(карточки) от краев, но при этом если доскролить до последнего ряда карточек, то можно заметить, что нижний border карточки скрыт, так как карточка вплотную прижата к нижнему краю грида. Получается скрол не учитывает наличие нижнего отступа и как бы обрезает\съедает его.

Border и тень карточек в последнем ряду скрыты

Проблему в большинстве браузеров можно решить достаточно просто, нужно увеличить высоту grid-row и выровнять наполнение по ее вертикальному центру или задать нижний magrin самим карточкам, что я и сделал. И это решение помогло везде, кроме Mozilla. Mozilla абсолютно наплевать на наличие отступа у карточки или высоту grid-row. Все пустое пространство ниже последнего ряда карточек благополучно оказывается за пределами скрола и карточка становится прижатой к нижнему краю грида.

Подскажите пожалуйста, есть ли какое-то универсальное решение для того, чтобы можно было избавиться от этой проблемы? Если нет универсального, то возможно есть способ добить реализацию конкретно для Mozilla? Единственный вариант который я вижу на данный момент - это добавить в конце еще 1 grid-row в котором будет лежать прозрачный блок с небольшой высотой. Такой блок по сути будет заменять собой отступ, но очень не хочется прибегать к подобному костылю.

Заранее благодарен за советы!


Ответы (0 шт):