A Sass mixin to replace padding-bottom on scrolling containers to fix the issue where there is no bottom padding in scrolling containers in Firefox.

padding-bottom-fix.scss

/*
Browsers like firefox ignore the bottom padding in scrolling containers. The
fix, other than inserting padding on the last child (which can cause visual
issues if the last child has a border or background color) is to add the
padding height `::after` the last child.

> Note: if you are using grids, the gap will be placed between `::after`
> pseudo-element and the target element. Therefore you must subtract the
> `$grid-row-gap` from the `$paddingBottom`.

- [Firefox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=748518)
- [Inspired by](https://stackoverflow.com/a/35413665/10577245)
*/
@mixin padding-bottom($paddingBottom, $grid-row-gap: 0px) {
  // This doesn't need to be important if you remember to always remove bottom
  // padding on the container you're adding this mixin to.
  padding-bottom: 0 !important;

  &:last-child::after {
    content: '';
    display: block;
    // Using calc allows for css variables, if you don't use them you can just
    // do direct padding - grid.
    height: calc(#{$paddingBottom} - #{$grid-row-gap});
  }
}

Inspired by: https://stackoverflow.com/a/35413665