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 = [...];

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