swiper.jsをが先祖要素にflexを使っていると挙動がおかしい。

Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
<style>
.flex {
    display: flex;
}
h3 {
    width:200px;
}
.slide-wrap{
    flex:1;
}
.management .meeting .swiper-container {
    width: 100%;
}
</style>

<div class="flex">
<h3>あああああああ</h3>

<div class="slide-wrap">
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide"><img src="slide001.jpg" alt=""/></li>
<li class="swiper-slide"><img src="slide002.jpg" alt=""/></li>
<li class="swiper-slide"><img src="slide003.jpg" alt=""/></li>
</ul>
 </div>
 </div>
 </div>


<script>

var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
    speed: 2000,
    centeredSlides: false,
  spaceBetween: 50,

  breakpoints: {
    980: {
      spaceBetween: 30,
		slidesPerView: 2.5,
		centeredSlides: false
    },
    300: {
      spaceBetween: 10,
		slidesPerView: 1.8,
        loop:true,
		centeredSlides: true
    },
  }
});

</script>

上記のようにデザインの都合上、flexを使ってレイアウトをしていますが、flexを使うをswiper.jsの挙動がおかしいです。
ウィンドウサイズを小さくしたり、大きくしたりすると、画像が巨大になり、コンテンツの幅がレイアウトの幅を無視して、横に長くなってしまいます。

解決方法はありますでしょうか？

Answer 1

こうするとどうでしょうか？

.slide-wrap {
  flex: 1;
  width: 0;
}