Keen-slider толкает макет ⇐ CSS

[Anonymous]

Я создаю макет, в котором использую реакцию и библиотеку острого слайдера. Когда я помещаю острый ползунок в гибкий элемент div, острый слайдер подталкивает мой макет. Ниже мой код. Когда я удаляю минимальную ширину из заголовка, все работает нормально. Есть ли у кого-нибудь идеи, почему это может происходить?
const items = [...]; // 15 items

const 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 (


Test Header


{items.map((i) => (

{i}

))}




);
};

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;
}



Подробнее здесь: https://stackoverflow.com/questions/787 ... hes-layout