search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.53k stars 602 forks source link

Is Flickity supposed to work in a CSS Grid layout? #972

Open felixsop opened 5 years ago

felixsop commented 5 years ago

Before I go down the rabbit hole of trying to figure out why it's not working cleanly for — is Flickity compatible with CSS grid? As in, should I be able to place it within a grid-area without the slides showing unexpected behavior?

I can currently only make this work if I give the carousel cells an exact pixel value, making it no longer responsive. If I use 100% width, the cells always end up overlapping, as the value for "left" in the carousel cell is apparently calculated to be an unexpected percentage. This persists until I resize the browser window, after which the cells jump into their respective places and the carousel works fine.

Is this something that I'm doing wrong on my end or is CSS grid not supported at this point?

jackbuehner commented 5 years ago

I'm getting this issue (albeit inconsistently) in CSS Flexbox as well

jamesckemp commented 3 years ago

I just fixed this issue by giving the CSS grid "cell" a min-width of 0. no idea why it worked, but it did.