Firefox和Chrome中的CSS网格呈现方式不同

Question

Heads up - I'm new here, and new to some of the css-grid stuff. Bear with me if this isn't a peak Stack Overflow question.

I'm implementing the Slick jquery slider/carousel plugin into the website. However, I need the carousel slides to (a) all be the exact same height, and (b) be the same height as the slide with the tallest content. I'm getting two different responses on Firefox and Chrome when I try to modify the css to allow for this

I have copied the plugin's css straight into the css of the files I'm working with (so it becomes just part of the native css) so I have better control over it.

I've modified this new pasted css slightly from the original script slick.css file, but only by modifying one the display: none; to display: grid; on the .slick-list selector. This deals with the issue on Firefox, but not on Chrome.

All code that I am using is located here. I have added one line of code background-color: red; to the .slick-list selector to illustrate the space that SHOULD be taken up by slides that are shorter than the tallest slide: https://codepen.io/kyleshepherddev/pen/eqMOxm

I'm not sure what I'm expecting - the css I'm using may not be the right way to fix the problem. We have a client who used this plugin on their site, and I'm mucking around trying to figure out exactly how to fix it. The content of the slider shifts a bit from slide to slide, so the goal is to make ALL slides the SAME HEIGHT as the slide with the most content in it.

Works like a charm in Firefox; doesn't work at all in Chrome.

Answer 1

Simple update these two classes:

.slick-list to display: flex instead of display: grid

.slick-track to display: flex instead of display: block