Carousel inside a flex column expands the column width
marcomartinscastanho opened this issue · 2 comments
Bugs and Questions
Prerequisites
- I've searched open issues to make sure I'm not opening a duplicate issue
- I have read through the docs before asking a question
- I am using the latest version of nuka-carousel
Describe Your Environment
- What version of nuka-carousel are you using? 5.4.1
- What version of React are you using? 18.2.0
- What browser are you using? Firefox 108.0.1
Describe the Problem
I have a page with 2 flex columns.
One of the columns has a box where I want to have a Carousel.
But the Carousel expands the width of the column.
https://codesandbox.io/s/vigorous-dawn-5twifm
Expected behavior:
With or without the Carousel, the column width should be the same.
Actual behavior
The column containing the Carousel expands.
Thank you for the very detailed repro in the sandbox. It made it much easier to troubleshoot. It appears the solution might not be in the library, but the CSS used in the surrounding layout. Adding overflow: hidden; to your column class seems to fix it:
https://codesandbox.io/s/carousel-in-flex-fix-0y7z6n?file=/src/styles.css:391-410
Thank you very much!
And sorry for reporting what ended up being a non-issue.