Slick: Huge width and horizontal overflow when used in CSS Grid

[ssagga]

When used inside a grid child element, slick takes a huge width (60,000 px) and overflows horizontally

====================================================================
JSFiddle Demo of the issue:
http://jsfiddle.net/9jzh45sx/7/

====================================================================

Steps to reproduce the problem

1. Create a CSS grid container
2. In one of the grid children containers, place a slick element

====================================================================

What is the expected behaviour?

Slick should take the width of the parent element

====================================================================

What is observed behaviour?

Slick sets a huge width (60,000 px) and overflows horizontally

====================================================================

More Details

• Which browsers/versions does it happen on?
  Firefox 59, Chrome 65
• Which jQuery/Slick version are you using?
  jQuery 3+ / Slick version 1.9
• Did this work before?

[farissi]

Try to add overflow:hidden to the grid that contains Slick, .grid-item-4 in your case.
You'll end up with something similar to this:

.grid-item-4{
  background-color: grey;
  grid-area:item-4;
  overflow: hidden;
}

[IAmAdamTaylor]

I was having the same issue. @farissi's idea of adding overflow: hidden; didn't work for me, so I did a bit more digging.

It seems this is a CSS Grid issue, rather than a problem with Slick.js. When you use fr units to define a grid track it will not shrink smaller than the min-content size of the content inside.

Slick gets the correct width for the track on the first pass and sets it on the element. This is when the problem arises - the newly set width increases the min-content size of the grid content, which in turn causes the width of the grid track to increase to match.

You can prevent the grid track from stretching like this by setting it to minmax( 0, 1fr ) instead. Bear in mind you might get overflow from long words or elements with larger implicit widths.

See the updated JS Fiddle - http://jsfiddle.net/9jzh45sx/13/

This probably explains why the overflow: hidden; didn't work for me as well - the element was already expanding to fit the content so there was no overflow to hide.

[subfighter3]

same issue here, but ONLY in Firefox (v65), but apparently the "overflow: hidden;" trick does the job…

not a definitive solution though

[enguerranws]

As @IAmAdamTaylor pointed out, the issue is related to the CSS fr unit, not to Slick. The fr unit fills up the available space and will never shrink on its content, but it can expand if needed. Think fr unit as a min-width.

Example : https://codepen.io/enguerranws/pen/rRgJYM

Works well in Chrome (73), Firefox (66) and Safari (12.1). @IAmAdamTaylor 's one also working on this browsers.

[isGabe]

Nice! Changing

grid-template-columns: repeat(3, 1fr);

to

grid-template-columns: repeat(3, minmax(0, 1fr));

on the containing element fixed this issue for me.