I'm building a layout in which I use react and the keen-slider library, when I put the keen slider in a div that is flex, the keen-slider pushes my layout. Below is my code. When I remove min-width from the header, it works ok. Does anyone have any ideas why this might be happening?
const items = [...]; // 15 itemsconst ItemsSlider = () => { const [loaded, setLoaded] = useState(false); const sliderOptions = { initial: 0, slideChanged(slider) { setCurrentSlide(slider.track.details.rel); }, created() { setLoaded(true); }, renderMode: "performance", slides: { perView: "auto", spacing: 4 } }; const [sliderRef, instanceRef] = useKeenSlider(sliderOptions); const [currentSlide, setCurrentSlide] = useState(0); return (<div style={{ width: "600px" }}><div className="container"><div className="header">Test Header</div><div className="slider"><div ref={sliderRef} className="keen-slider tw-mt-1"> {items.map((i) => (<div key={i} className="keen-slider__slide item"> {i}</div> ))}</div></div></div></div> );};export default PopularManufacturersSlider;.App { font-family: sans-serif; text-align: center;}.item { border: 1px solid #3a3a3a; padding: 12px 16px; border-radius: 4px; width: auto !important; white-space: nowrap;}.container { display: flex;}.header { min-width: 330px;}.slider { position: relative;}