Slick: Slick inside the table or table-cell — Slick's width grows enormously large

[artuska]

tl;dr
Just use exactly this styles for your table container:

.container {
  display: table;
  width: 100%;
  table-layout: fixed;
}

Wasted a lot of time to resolve an issue, when Slick is inside display: table-cell container. There are a lot of issues created here about this topic but no one provided 100% complete answer how to deal with 45 000+ pixels wide Slick.

Here is fully working JS Fiddle: http://jsfiddle.net/h61ur1zs/1/ (resize the browser or an iframe to see Slick width grows exponentially; uncomment some styles to fix crooked hands of Slick developers, those shitty coders).

[simeydotme]

excuse me....
... did you just call the developers of this plugin "crooked" and "shitty" coders?

[simeydotme]

I think it's pretty hypocritical for that kind of tone, when you're abusing the DOM and CSSOM to apply table-cell and table display modes to non-tabular data.

I also think it's pretty bullshit for you to be allowed to use the internet when you behave like that.

fuck off.

[artuska]

@simeydotme first of all I'm not abusing the DOM — if I need equal column height I use display: table — this is absofuckinglutely normal and common CSS thechnique, there are other methods, but I need CSS tables in my case.

Also, if you have many issues about mystical 45 000 (and growing) pixels wide Slick container... you are doing something fundamentally wrong, that is why you are shitty coders. It must be something really wrong with your logic inside your brain.

Fuck you.

[tyrann0us]

@simeydotme I just reported @artuska to GitHub for beeing offensive.

[jonathan-pyper]

css /flex

[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.

[almatirgalin]

@Apindes thanks, this was very useful for me - { overflow: hidden; min-width: 100%; width: 0; }

[umar13893]

@Apindes Thank you so much! I used your code and it works perfect for me. :)

[Adomph]

@Apindes thanks, this was very useful for me

[anneminford]

@Apindes again thanks, this worked - { overflow: hidden; min-width: 100%; width: 0; }