Unreasonable height of vertical swiper

Question

I've created a vertical swiper inside a bootstrap 4 row and have applied height limits to the row. But the vertical swiper is going out of bounds.

Any help will be appreciated.

Thanks.

HTML:

<div class="row">
  <div class="col-6 mh-50">
    <div class="v-swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-1" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-2" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-3" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-4" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-5" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-6" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-7" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-8" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-9" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-10" /></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>

  <div class="col-6 mh-50">
    <img src="//placehold.it/200x100?text=Col-2" />
  </div>
</div>
<div class="row">
  <img src="//placehold.it/500x100?text=Row-2" />

</div>

CSS:

.mh-50 {
  max-height: 50vh;
}

JS:

var vswiper = new Swiper('.v-swiper-container', {
  direction: 'vertical',
  speed: 2000,
  autoplay: {
    delay: 2000,
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

JS Fiddle: https://jsfiddle.net/4ogo3vcg/4/

Answer 1

I have been facing the same issue with Swiper version 6.7.0. Here I am sharing my work-around.

I have made a tweak in CSS.

.swiper-container-vertical .swiper-wrapper {
      position: absolute;
}

I hope this may end someone's search. Happy Coding! :)