I had this issue today where when I went to test a new module inside Firefox, the slides themselves were 30k+ pixels in width. Luckily a quick google search led me to https://github.com/kenwheeler/slick/issues/982.

The issue has something to do with the combination of Firefox’s Flexbox & Grid implementation, and something inside the Slick Carousel…somehow Firefox is getting confused about item widths in the carousel that’s inside Flexbox/CSS Grid. (Note: the linked issue was originally about Flexbox, but my issue was a slider inside a a CSS Grid column.)

The first response with hundreds of reacts suggested:

* {
  min-height: 0;
  min-width: 0;
}

I tried those rules, but individually on each of the nodes leading down to the slide itself, instead of trying a blanket rule set for literally everything. It didn’t work.

I scrolled further to find the answer that actually worked for me.

.carousel {
  overflow: hidden;
  min-width: 100%;
  width: 0;
}

I have no idea how a contradiction of 0 width and 100% min-width does anything. The overflow declaration didn’t really affect anything, at least for my use case.