Slick: Slick carousel doesn't resize correctly within a flexbox grid in Firefox

[neutronron]

Slick is working great for me in the suggested configurations on all of the browsers I've tested, but when I put a slider inside a flexbox grid, Firefox messes it up.

I traced through the code, and it appears that even though a user might be resizing the browser and making it smaller, Firefox is returning larger and larger values for $list.height() and $list.width() when they're called in setDimensions().

I've set up a jsfiddle reproducing the problem. The first slider "main" is outside of the flexboxes, and works fine on all browsers. The second slider "nestedSlider" is inside the flexbox grid and displays correctly for me in Chrome and Safari (on OSX) and on my iPhone - and resizing the browser results in a properly resized slider. However, in Firefox, when you resize the browser, the slider just gets larger and larger.

http://jsfiddle.net/ronwild/qxkqzjow/5/

Is there any way to work around this?

Thanks

[kakt00c]

I have the same issue :(
Carousel is brocken even in case when flexbox was applyed not on the closest parent, but on any of the wrappers.
Please, share if you have any ideas how to fix this

[kakt00c]

Guess what -- i have found fix!
http://stackoverflow.com/questions/26895349/how-can-i-get-ff-33-x-flexbox-behavior-in-ff-34-x
so, you should add to the styling:
*{
min-height: 0;
min-width: 0;
}
this works for me and i am so happy.

[safareli]

@kakt00c that fix works for me +1

[lelandcope]

+1 @kakt00c thanks for the fix.

[michaelsoriano]

wow. after hours of debugging - this solved for me. A big +1 !!!!

[pkrater]

@kakt00c brilliance!

[resting]

@kakt00c thanks for the fix info!

[leoquijano]

@kakt00c that's an awesome catch! thanks!

[upendersanga]

@kakt00c You are brilliant..
You gave a simple and brilliant solution.. _Thank a lot..._

[upendersanga]

@kakt00c Can you explain this solution.. its usefull for every one

[robertwbradford]

It looks like you can apply the styles @kakt00c mentioned on parent element of the slider instead of using the * selector. For example:

.slider-parent {
  min-width: 0;
  min-height: 0;
}

Then in your markup:

<div class="slider-parent">
  <div class="slider">...</div>
</div>

[adamfchs]

This was a great post. I wasn't having the Firefox issue but I needed a way for js libraries like flexbox.js and slick.js to get the width of flex items so they could properly set the image widths.

Setting this on the flex-items was all that was needed!
min-height: 0
min-width: 0

[JiveDig]

A couple years later and this just made my day! Thanks.

[Stamc]

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

Thank you!

[MartinDawson]

@kakt00c This isn't the correct fix. You are applying that styling to every element now

[JiveDig]

You can certainly just do

.slick-slider * {
    min-height: 0;
    min-width: 0;
}

if it makes you more comfortable.

[MartinDawson]

@JiveDig Yes but a lot of people here are probably just copy pasting the answer and will find bugs because of it later.

[leoquijano]

This is not a matter of being comfortable, it's a matter of avoiding bugs and issues in production websites. I've had third party plugins in WordPress sites in the past do that (style everything because they don't think about where their CSS will be used), and it's problematic, especially when errors are subtle.

The correct fix is to properly limit the styling to the slick-slider CSS class, and not the one originally posted.

[JiveDig]

@leoquijano I agree. I personally have the first method in my starter theme because that fix applies to many other elements of my flexbox based theme, so there is a benefit to me. If the sole purpose is to fix _only_ Slick, then my/our approach, limiting to .slick-slider is the natural solution.

[zrpnr]

I noticed a similar issue if the slideshow is in a css grid column.
If the parent container was using grid for layout, the slides were all arranged in a single long row.

In this case the column itself needs @kakt00c fix, not the .slick-slider element.
but only min-width: 0 was necessary.

.container {
  display: grid;
}
.container--column {
  min-width: 0;
}

[arirocks]

i`m trying to use slick with CSS grids and i cant seem to get it to work and because flexbox is similar to css grids i figured that the solution might be similar i hope this isnt considered off topic thank you

[Postnov]

kakt00c, thank you!

[jaks6]

I would like to use a more narrow selector than just , for example .slick-slider * as mentioned above. However using "parent *" or ".slick-slider *" do not work, while using just "" as kakt00c showed, does work for me.

I'm using slick inside a flexbox layout. Any suggestions?

[pjatx]

@kakt00c thank you for saving my sanity!

[gemplank]

thank you! breathes sigh of relief

[marsonauta]

Muchas gracias @kakt00c!

[erikdevos]

Thank you for the solution @kakt00c ! It was driving a collegae of me crazy until i found this fix.

Personally i wouldn't apply it on every element with "*" though. But only apply it on the specific element(s) that need it. But people here have already said that :)

[Apindes]

Hi guys. I had the same issue - my slider was 35k pixel in length and this code
*{ min-height: 0; min-width: 0; })
didn't work for me unfortunately.
So i found a simple fix:
add.carousel { overflow: hidden; min-width: 100%; width: 0; } this styles to ur slider.
That solved my problem and enormous length disappeared.

[nwallis]

Hi guys. I had the same issue - my slider was 35k pixel in length and this code
*{ min-height: 0; min-width: 0; })
didn't work for me unfortunately.
So i found a simple fix:
add.carousel { overflow: hidden; min-width: 100%; width: 0; } this styles to ur slider.
That solved my problem and enormous length disappeared.

This worked for me too.. i was trying to use the slick carousel inside bootstrap, so technically my parent was not display:flex... the grandparent was. The row makes the col "display:box"... but still i needed to add this fix... I don't quite understand why yet... but will run with this for now

[tictok]

@Apindes When trying to using Slick inside a div which is a great-grandchild of a flex parent. .[your_carousel_container_element_class] { min-width: 100%; width: 0; } worked for me too (without the overflow:hidden rule). Thanks.

[Bucklash]

Damn, none of these work for me.... Had to resort to removing flex

[Bucklash]

Found solution for me:
On my Joomla site, using uikit, if I add .uk-width-1-1 to the module class then all is good (there are no uikit classes within the module except padding etc)

[pesimeao]

Hi guys,

Thank you for all answers, they worked ;)
However I can't figure out how to make it work in firefox using flex-direction: column and variable height. It works well in all browsers except firefox (right margin in each slide). Any idea?

Codepen: https://codepen.io/pesimeao/pen/XOQXBo

Chrome:

Safari:

Edge:

Firefox:

[padcreative]

None of these fixes are working for me.

[nephlin7]

Guess what -- i have found fix!
http://stackoverflow.com/questions/26895349/how-can-i-get-ff-33-x-flexbox-behavior-in-ff-34-x
so, you should add to the styling:
*{
min-height: 0;
min-width: 0;
}
this works for me and i am so happy.

works Fine 👍👍

[colinsanford]

The min-height + min-width of 0 approach from kakt00c has worked well in most cases, however I encountered a scenario where it didn't work in IE 11.

I then tried the min-width: 100% + width: 0 approach from Apindes. This fixed the issue in IE 11 but safari 12.1.2 (mac os) now was broken.

Combining the two approaches fixed the issue for in both IE 11 and safari

.slider-container {
    min-width: 0;
    min-height: 0;
}

.slider {
    width: 0;
    min-width: 100%;
}

Edit: In addition to above, in my case min-width: 0 and min-height: 0 was needed on other parent flex items (since several flex elements were nested)

[aerasoft]

overflow: hidden; min-width: 100%; width: 0;

You saved my a....... DAMN..For 1 week.

[fayazrehmani]

Hi,
Min width was not working for me but when I added following code it worked.
.slick-list {
width: 100%;
}
As I noted that my parent item (.slick-wrapper) had to be flex item and that's why its sibling that is .slick-list was not taking full width and internal items did not initialized till end of container. Adding above code made it stretch till end..
Hope this helps!

[tobytraylor]

kakt00c thank you. wasted 8 hours.

[AnthonySpain]

@kakt00c - thanks a lot. In my case it wasn't the direct parent element of the slick slider. I had my slider nested in multiple containers, I just had to inspect and find the container that was spilling out of it's parent first, then apply the min-width and min-height to that container. I was losing hope after applying it to multiple elements with no results. When I saw the slider conform to the width after I added it, I jumped for joy. Saved me a lot more time.

[doekenorg]

For anyone wanting to fix this in tailwindcss:

wrap it in this:

<div class="block w-0 min-w-full">
     <VueSlickCarousel></VueSlickCarousel>
</div>