marcomartinscastanho commented 1 year ago

Bugs and Questions

Prerequisites

[x] I've searched open issues to make sure I'm not opening a duplicate issue
[x] I have read through the docs before asking a question
[x] 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.

fritz-c commented 1 year ago

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