title: Unreasonable height of vertical swiper
body: <p>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.</p>
  
  <p>Any help will be appreciated.</p>
  
  <p>Thanks.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-6 mh-50"&gt;
      &lt;div class="v-swiper-container"&gt;
        &lt;div class="swiper-wrapper"&gt;
          &lt;div class="swiper-slide"&gt;&lt;img src="//placehold.it/100x100?text=Week-1" /&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img src="//placehold.it/100x100?text=Week-2" /&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img src="//placehold.it/100x100?text=Week-3" /&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img src="//placehold.it/100x100?text=Week-4" /&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img src="//placehold.it/100x100?text=Week-5" /&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img src="//placehold.it/100x100?text=Week-6" /&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img src="//placehold.it/100x100?text=Week-7" /&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img src="//placehold.it/100x100?text=Week-8" /&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img src="//placehold.it/100x100?text=Week-9" /&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img src="//placehold.it/100x100?text=Week-10" /&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-6 mh-50"&gt;
      &lt;img src="//placehold.it/200x100?text=Col-2" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;img src="//placehold.it/500x100?text=Row-2" /&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.mh-50 {
    max-height: 50vh;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var vswiper = new Swiper('.v-swiper-container', {
    direction: 'vertical',
    speed: 2000,
    autoplay: {
      delay: 2000,
    },
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  });
  </code></pre>
  
  <p>JS Fiddle: <a href="https://jsfiddle.net/4ogo3vcg/4/" rel="nofollow noreferrer">https://jsfiddle.net/4ogo3vcg/4/</a></p>